Question

所有

我正在尝试实现一个调整大小的功能（拖动DIV的边框来调整它的大小），但触发事件真的很难找到。

假设我只想要一个DIV，而是在其中设置Border区域元素，我想找到一种方法在该DIV元素上设置事件监听器，我知道SVG可以通过将指针事件设置为笔划来做到这一点，但是我不知道如何在HTML元素上执行此操作。

<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>

由于

Answer 1

边框不是元素，因此您无法绑定它们，但可以使用offset（）和outerWidth（）并检查它们是否与鼠标位置相同。

Answer 2

我知道你只想要一个div，但也许你可以将一个放在另一个div之上并使用bottom div作为边框。我已经弄清楚了解这种行为，请查看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;

}

和html

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

和js

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

Answer 3

我认为你必须让边框成为父div

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

你可以在这里看到一个有效的例子：

http://jsfiddle.net/s5gz9w73/1/

Answer 4

在棘手的解决方法后找到解决方案 -

使用简单的几何计算收集边框的坐标。

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

您可以按如下方式创建边框坐标数组：

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++;
  }
}

然后，使用.mousemove(function(e){});处理程序，您可以检查“e.clientX，e.clientY”是否属于border_coord[]，如下所示：

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

这是一个有效的materializecss。

Answer 5

您是否可以使用css resize: both;属性并使用jQuery检测#resize的大小变化？

这是一个提案：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

虽然，很多取决于你到底想要达到的目的。

如何仅在DIV的边界区域中触发鼠标移动

5 个答案: