Question

我想创造一种“从碗里取石头”的效果。新的div元素“.stone”应该通过单击指定的div“.bowl”在鼠标光标下创建。当用户点击并按下鼠标时，石头应该是可以直接拖动的。

我所能写的只是添加用户可以通过第二次点击移动的新元素，但不是首先：

[t for t in list2 if not any (t[2] == u[2] for u in list1)]

https://jsfiddle.net/rzab2h5u/

我怎么能正确地做到这一点？

Answer 1

这可以通过在创建事件后将事件基本传递给draggable来完成。参考：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);
  });
});

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

单击添加并拖动新项目

1 个答案: