jQuery-ui - 仅在可放置区域上拖动事件

时间:2013-06-06 10:28:01

标签: jquery jquery-ui drag-and-drop

当可拖放区域出现时,我们如何获得可拖动对象的拖动事件? 实际上,droppable的over事件不会捕获拖动对象的拖动事件。任何人都可以建议我这样做。感谢

$("#draggable").draggable({
    revert: true,
    drag: function (event, ui) {
       //console.log(ui.offset); ---------> Works fine
    },
    stop: function (event, ui) {}
});

$("#droppable").droppable({
    activeClass: "drop-active",
    hoverClass: "drop-hover",
    accept: "#draggable",
    tolerance: "fit",
    drop: function (event, ui) {

        $("<div></div>").text(ui.draggable.text()).appendTo(this);

    },
    out: function (event, ui) {
        console.log('out');
    },
    over: function (event, ui) {
        var dragItem = ui.draggable;
        var dragOffset = ui.offset;
        //console.log(dragOffset);  ---------> not getting drag events param

    },

});

1 个答案:

答案 0 :(得分:0)

<强>更新

好的,我明白你的意思了。您实际上无法获得over上的实际偏移量,因为它只会在您的拖动对象进入droppable时触发。 只发生一次。我们需要一个解决方法。这是我的解决方案:

var x = 0;
var y = 0;

$("#draggable").draggable({
    revert: true,
    drag: function (event, ui) {
      //here it works fine 
      //console.log(ui.offset);
      x = ui.offset.left;
      y = ui.offset.top;
      console.log(x + " " + y);
    }
});

并在over事件中:

over: function (event, ui) {
        var dragOffsetx = x;
        var dragOffsety = y;
    }

我创建了一个全局变量[x和y]并在drag上更新它。但是你仍然可以获得over事件的值,因为它是全局声明的。