javascript - How to only trigger mouse move in border area of a DIV - Stack Overflow

admin管理员组

文章数量:1023097

All:

I am trying to implement a resizing function(drag the border of a DIV to resize it), but the trigger event is really hard to find.

Say I only want a single DIV, instead set Border area element inside it, I would like find a way to set event listener on that DIV element, I know SVG can do that by setting pointer-events to stroke, but I have no idea how to do this on HTML element.

<style>
    #resize {
        border:solid black 5px;
        width:100px;
        height:100px;
        display:block;
/* I do not know what to set here to make only border can respond to mouse action */
    }
</style>

<div id="resize"></div>

<script>

    $("#resize").on("mousemove", function(){
        if(isMouseDown) {
            // drag to resize logic here
        }
    })

</script>

Thanks

All:

I am trying to implement a resizing function(drag the border of a DIV to resize it), but the trigger event is really hard to find.

Say I only want a single DIV, instead set Border area element inside it, I would like find a way to set event listener on that DIV element, I know SVG can do that by setting pointer-events to stroke, but I have no idea how to do this on HTML element.

<style>
    #resize {
        border:solid black 5px;
        width:100px;
        height:100px;
        display:block;
/* I do not know what to set here to make only border can respond to mouse action */
    }
</style>

<div id="resize"></div>

<script>

    $("#resize").on("mousemove", function(){
        if(isMouseDown) {
            // drag to resize logic here
        }
    })

</script>

Thanks

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 28, 2015 at 20:38 Kuan asked Aug 28, 2015 at 20:00 KuanKuan 11.4k2525 gold badges101101 silver badges212212 bronze badges 2

• You could check if a mouse coordinate is close to a border. E.g. if you want to resize horizontally and your div is 100px wide, you could check if the x coordinate is between 99 and 101. Of course, you could set better thresholds. – icanc Commented Aug 28, 2015 at 20:19
• @Kuan Please respond to the answers posted by me. – Nikunj Madhogaria Commented Aug 31, 2015 at 17:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

borders are not elements so you can't bind to them, but you can use offset() and outerWidth() and check is they are the same as the mouse position.

I think you would have to make the border a parent div

<div id="resize">
    <div id="innerpart">
    </div>
</div>

you can see a working example here:

http://jsfiddle/s5gz9w73/1/

I know that you want only one div, but maybe you could place one above other and use bottom div as border. I've made fiddle to illustrate this behaviour, check console.log.

js fiddle

.outside {

    height:60px;

    width:60px;

    background:black;

    position:relative;

    z-index: 30;

}

.inside {

    background: yellow;

    height:50px;

    width:50px;

    position: absolute;

    top:12px;

    left: 13px;

    z-index:999;

}

and html

<div class="outside"></div>
<div class="inside"></div>

and js

$(".outside").on("mousemove", function () {
    console.log('im above outer element');
});

Found a solution after a tricky workaround —

Collect the coordinates of border using simple geometrical calculations.

Set of Border Coordinates = Set of (Border + Content) Coordinates - Set of Content Coordinates

You can create an array of border coordinates as follows:

var y_offset = $("#resize").offset().top;
var x_offset = $("#resize").offset().left;

var y_outer = y_offset + $("#resize").height() + (2 * 5) - 1;
var x_outer = x_offset + $("#resize").width() + (2 * 5) - 1;

var i, j, pos, outer_size;
var outer_div_coord = [];
pos = 0;

for(i = x_offset; i <= x_outer; i++){
  for(j = y_offset; j <= y_outer; j++){
    outer_div_coord[pos++] = i + "," + j;
  }
}
outer_size = pos;

var inner_div_coord = [];
pos = 0;

for(i = x_offset + 5; i <= x_outer - 5; i++){
  for(j = y_offset + 5; j <= y_outer - 5; j++){
    inner_div_coord[pos++] = i + "," + j;
  }
}

var border_coord = [];
pos = 0;

for(i = 0; i < outer_size; i++){
  if(inner_div_coord.indexOf(outer_div_coord[i]) == -1){
    border_coord[pos] = outer_div_coord[i];
    pos++;
  }
}

Then by using .mousemove(function(e){}); handler, you can check whether the "e.clientX,e.clientY" belongs to border_coord[] as follows:

$("#resize").mousemove(function(e){
  cursor_coord = e.clientX + "," + e.clientY;
  if(border_coord.indexOf(cursor_coord) > -1)
    console.log("on border");
});

Here's a working DEMO.

Can't you make use of the css resize: both; property and detect change in size of #resize using jQuery?

Here's a proposal:

var h = 100;
var w = 100;
var ctr = 0;
$("#resize").mouseup(function(){
  if($(this).height() != h || $(this).width() != w){
    ctr++;
    $("pre").text("resized "+ctr);
    h = $(this).height();
    w = $(this).width();
  }
});

#resize {
  border: solid black 5px;
  width: 100px;
  height: 100px;
  display: block;
  resize: both;
  overflow: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resize"></div>
<pre>resized 0</pre>

Although, alot depends on what are you exactly trying to achieve.

All:

I am trying to implement a resizing function(drag the border of a DIV to resize it), but the trigger event is really hard to find.

Say I only want a single DIV, instead set Border area element inside it, I would like find a way to set event listener on that DIV element, I know SVG can do that by setting pointer-events to stroke, but I have no idea how to do this on HTML element.

<style>
    #resize {
        border:solid black 5px;
        width:100px;
        height:100px;
        display:block;
/* I do not know what to set here to make only border can respond to mouse action */
    }
</style>

<div id="resize"></div>

<script>

    $("#resize").on("mousemove", function(){
        if(isMouseDown) {
            // drag to resize logic here
        }
    })

</script>

Thanks

All:

I am trying to implement a resizing function(drag the border of a DIV to resize it), but the trigger event is really hard to find.

Say I only want a single DIV, instead set Border area element inside it, I would like find a way to set event listener on that DIV element, I know SVG can do that by setting pointer-events to stroke, but I have no idea how to do this on HTML element.

<style>
    #resize {
        border:solid black 5px;
        width:100px;
        height:100px;
        display:block;
/* I do not know what to set here to make only border can respond to mouse action */
    }
</style>

<div id="resize"></div>

<script>

    $("#resize").on("mousemove", function(){
        if(isMouseDown) {
            // drag to resize logic here
        }
    })

</script>

Thanks

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Aug 28, 2015 at 20:38 Kuan asked Aug 28, 2015 at 20:00 KuanKuan 11.4k2525 gold badges101101 silver badges212212 bronze badges 2

• You could check if a mouse coordinate is close to a border. E.g. if you want to resize horizontally and your div is 100px wide, you could check if the x coordinate is between 99 and 101. Of course, you could set better thresholds. – icanc Commented Aug 28, 2015 at 20:19
• @Kuan Please respond to the answers posted by me. – Nikunj Madhogaria Commented Aug 31, 2015 at 17:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

borders are not elements so you can't bind to them, but you can use offset() and outerWidth() and check is they are the same as the mouse position.

I think you would have to make the border a parent div

<div id="resize">
    <div id="innerpart">
    </div>
</div>

you can see a working example here:

http://jsfiddle/s5gz9w73/1/

I know that you want only one div, but maybe you could place one above other and use bottom div as border. I've made fiddle to illustrate this behaviour, check console.log.

js fiddle

.outside {

    height:60px;

    width:60px;

    background:black;

    position:relative;

    z-index: 30;

}

.inside {

    background: yellow;

    height:50px;

    width:50px;

    position: absolute;

    top:12px;

    left: 13px;

    z-index:999;

}

and html

<div class="outside"></div>
<div class="inside"></div>

and js

$(".outside").on("mousemove", function () {
    console.log('im above outer element');
});

Found a solution after a tricky workaround —

Collect the coordinates of border using simple geometrical calculations.

Set of Border Coordinates = Set of (Border + Content) Coordinates - Set of Content Coordinates

You can create an array of border coordinates as follows:

var y_offset = $("#resize").offset().top;
var x_offset = $("#resize").offset().left;

var y_outer = y_offset + $("#resize").height() + (2 * 5) - 1;
var x_outer = x_offset + $("#resize").width() + (2 * 5) - 1;

var i, j, pos, outer_size;
var outer_div_coord = [];
pos = 0;

for(i = x_offset; i <= x_outer; i++){
  for(j = y_offset; j <= y_outer; j++){
    outer_div_coord[pos++] = i + "," + j;
  }
}
outer_size = pos;

var inner_div_coord = [];
pos = 0;

for(i = x_offset + 5; i <= x_outer - 5; i++){
  for(j = y_offset + 5; j <= y_outer - 5; j++){
    inner_div_coord[pos++] = i + "," + j;
  }
}

var border_coord = [];
pos = 0;

for(i = 0; i < outer_size; i++){
  if(inner_div_coord.indexOf(outer_div_coord[i]) == -1){
    border_coord[pos] = outer_div_coord[i];
    pos++;
  }
}

Then by using .mousemove(function(e){}); handler, you can check whether the "e.clientX,e.clientY" belongs to border_coord[] as follows:

$("#resize").mousemove(function(e){
  cursor_coord = e.clientX + "," + e.clientY;
  if(border_coord.indexOf(cursor_coord) > -1)
    console.log("on border");
});

Here's a working DEMO.

Can't you make use of the css resize: both; property and detect change in size of #resize using jQuery?

Here's a proposal:

var h = 100;
var w = 100;
var ctr = 0;
$("#resize").mouseup(function(){
  if($(this).height() != h || $(this).width() != w){
    ctr++;
    $("pre").text("resized "+ctr);
    h = $(this).height();
    w = $(this).width();
  }
});

#resize {
  border: solid black 5px;
  width: 100px;
  height: 100px;
  display: block;
  resize: both;
  overflow: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resize"></div>
<pre>resized 0</pre>

Although, alot depends on what are you exactly trying to achieve.

本文标签： javascriptHow to only trigger mouse move in border area of a DIVStack Overflow