Question

我目前正在使用jQuery UI来拖放我的应用程序。我用它制作游戏，你需要制作一个对象的组合（例如：一瓶带打火机的啤酒）

但在某些情况下项目更接近，所以如果我拖放，drop事件会多次处理..

有一种方法可以使手柄只发生一次？或者只检测多个悬停上最近的对象？

修改

代码：

$('#overlay-objet img').droppable({
    tolerance: 'touch',
    drop: _.bind(function(event, ui) {
        object = $(event.target);
        if (object.attr("data-val") != undefined){
            objectDrag = object.attr('data-val').toString();
            objectDrop = $(ui.draggable).attr('data-val').toString();
            object.addClass('hidden');
        $('#'+object.attr('data-toggle')).removeClass('hidden');
        this.dragDropEvent(objectDrag + objectDrop);
        }
    }, this),
    over: _.bind(function(event,ui){
        object = $(event.target);
    object.addClass('hidden');
        $('#'+object.attr('data-toggle')).removeClass('hidden');
    }, this),
    out: _.bind(function(event,ui){
        object = $(event.target);
    object.removeClass('hidden');
    $('#'+object.attr('data-toggle')).addClass('hidden');
    }, this) // Edit mercredi soir ajouter ,this dans chaque callback
});
$('img.big-objet').draggable({
    helper: "clone"
});

我上面没有说，但我使用的是主干+ requireJS +下划线

Answer 1

没有您的代码，我们几乎无法帮助您。无论如何，我可以猜到那里发生了什么。您可能不会在this函数中使用drop关键字并使用查询选择器。看看我的代码：

HTML

  <div class="draggable">Drag me</div>
  <div class="droppable">Drop Here</div>
  <div class="droppable">Drop Here</div>
  <div class="droppable">Drop Here</div> 
  <div class="droppable">Drop Here</div>

JS

$('.draggable').draggable({
  helper: 'clone'
});
$('.droppable').droppable({
  drop: function(e, ui){
    $(this).css('color', 'red');
  }
});

这很好用。查看jsbin页面here。但是如果我使用选择器而不是this，则drop可以影响选择器匹配的所有元素。想想我是否写了这样的代码：

$('.draggable').draggable({
  helper: 'clone'
});
$('.droppable').droppable({
  drop: function(e, ui){
    $('.droppable').css('color', 'red'); // selector instead of this
  }
});

然后假设will not work

jQuery UI拖放更近的项目

1 个答案:

HTML

JS