CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kuan
Kuan

Reputation: 11389

How to only trigger mouse move in border area of a DIV

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

Upvotes: 3

Views: 2936

Answers (5)

Nikunj Madhogaria
Nikunj Madhogaria

Reputation: 2307

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.

Upvotes: 1

Nikunj Madhogaria
Nikunj Madhogaria

Reputation: 2307

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.com/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.

Upvotes: 0

cssBlaster21895
cssBlaster21895

Reputation: 3710

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');
});

Upvotes: 1

Ekim
Ekim

Reputation: 1105

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.net/s5gz9w73/1/

Upvotes: 1

Oussama Elgoumri
Oussama Elgoumri

Reputation: 617

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.

Upvotes: 1

Related Questions