通过单击添加并拖动新项目

Question

我想创建一个"从碗里拿石头"的效果。新的div 元素".stone"应该通过单击指定的div ".bowl" 在鼠标光标下创建。石头应该是可直拖动的，而用户点击并按下鼠标。

我所能写的就是添加新元素，用户可以通过第二次单击移动，但不能通过第一次移动：

$(".bowl").on('mousedown', function ( event ) {
        var $stone = $('<div class="stone"></div>').css({
            left: event.pageX - 25,
            top: event.pageY - 25,
            position: "absolute"
        });
        $(this).parent().append($stone);
        $stone.draggable();
    });

https://jsfiddle.net/rzab2h5u/

我怎样才能以正确的方式做到这一点？

Answer 1

这可以通过在创建事件后基本上将事件传递给可拖动对象来完成。参考： https://forum.jquery.com/topic/trigger-draggable-on-mousedown

工作示例：https://jsfiddle.net/Twisty/s3tfa3dr/

JavaScript

$(function() {
  var bowl = $(".bowl");
  bowl.droppable({
    accept: ".stone",
    greedy: true,
    drop: function(event, ui) {
      ui.draggable.detach();
    }
  });
  bowl.on('mousedown', function(event) {
    var $this = $(this);
    var $stone = $('<div>', {
      class: "stone",
      id: "stone-" + ($(".stone").length + 1)
    }).css({
      left: event.pageX - 25,
      top: event.pageY - 25,
      position: "absolute"
    }).appendTo($this.parent()).draggable({
      start: function(ui, event) {
        console.log("Drag Started");
      }
    });
    $stone.trigger(event);
  });
});

我们基本上在新对象上重新触发相同的事件。