Question

我需要能够在mousemove事件中动态地将HTML对象设置为jQuery UI draggables;这是因为页面上的某些对象是在光标下动态创建的。

天真的方法不起作用（因为，我猜，draggable（）绑定到mousedown事件）。有没有办法入侵jQuery UI draggable插件，所以我可以将它分配给mousemove上的元素并立即开始拖动它？

提前谢谢。

Answer 1

在没有真正的 mousedown 的情况下，实际上并没有很多东西可以阻止拖拽。它可能会导致很多副作用，特别是如果你想与其他插件结合使用，例如可放置或可排序，但取决于你正在寻找什么可能还不错。

这是一个基本的例子，您可以扩展它以满足您的需求：

window.onmousemove = function(e) {
  // for this example when you move over x = 200 an element is created
  // and dragging starts
  if (e.pageX > 200) {
   
    
    // you create the element
    var newEl = document.createElement('div');
    document.body.appendChild(newEl);
    newEl.classList.add('new');
    
    // set as draggable
    $(newEl).draggable();
    
    // get the instance
    var dragIns = $(newEl).draggable('instance');
    
    // trigger a mousedown with a which parameter to fake a left click
    $(newEl).trigger({type: 'mousedown', which: 1});
    
    // you set some variable and call some methods directly
    // on the instance to override normal behaviour
    dragIns._mouseStarted = true;
    
    // for mouse start you need the info of the mousemove event
    dragIns._mouseStart(e);
    dragIns.offset.click = {
      left: 8,
      top: 8
    };
	
    // run this only once
    window.onmousemove = null;
  }
}

.new {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<div>

</div>

jQuery UI draggable：在mousemove事件中绑定到对象？

1 个答案: