Question

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

    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事件触发了可拖动的功能，但它只在我释放保持并在下次尝试时才有效。如何使拖拽自行保持而不是下次？

修改

在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

如何在draggable上使用延迟而不是hold Hammer事件？

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

动态添加可拖动对象第一次不工作

2 个答案: