javascript - 动态添加的可拖动对象第一次不起作用

Question

我正在将可拖动功能添加到特定用户事件（保持事件）上的元素。拖动功能第一次不起作用。

    Hammer(element).on("hold",function(event){
        console.log("hold");
        $(element).draggable({
                helper: "clone",
                cursorAt: { left: 5, top: -5 },
                cursor: "move",
                stop: function() {
                        $(element).draggable("destroy");
                }
        });
    });

在上面的代码片段中，hold 事件触发了可拖动功能，但它仅在我释放 hold 并下次尝试时才有效。如何使拖动启动本身而不是下一次？

编辑：

在jsbin中添加了示例代码。

Answer 1

这对我有用：

$('.pic').draggable({
    revert: 'invalid',
    start: function(event, ui) {

    },
    stop: function(event, ui) {
        $(this).removeClass('dragging');
    }
});

$('body').hammer().on('hold', '.container li', function() {
    $('.pic', this).addClass('dragging');
});

$('body').hammer().on('dragstart', '.container li .pic', function(e) {
    if (!$(this).hasClass('dragging')) {
        e.preventDefault();
    }

});

Answer 2

如何在可拖动而不是保持锤子事件上使用延迟？

 $(element).draggable({
                helper: "clone",
                cursorAt: { left: 5, top: -5 },
                cursor: "move",
                stop: function() {
                        $(element).draggable("destroy");
                },
   start: function() {
     console.log("start");
   },
                delay:300
        });