Question

我希望能够将一个可拖动拖动到一个droppable中。然后，当我拖入另一个draggable时阻止用户将其丢弃在先前丢弃的draggable上，但仍然将其放在droppable上。这是一个如此荒谬的句子，我添加了一个图片来说明下面的内容，以及我迄今为止尝试过的内容：http://jsfiddle.net/u4pAf/6/

detect if draggable is being placed over a dropped draggable

以下是jsfiddle上的代码。只是一个尝试让事情变得有效的演示。我确定检测拖动是否超出可拖动的拖放的最佳方法是使draggables也可以放置，并将accept参数设置为false，因此它什么都不接受。

的CSS：

.draggable-elem { background:red }
.drag1 {width: 100px; height: 40px;}
.drag2 {width: 150px; height: 80px;    margin-top:10px;}


.boundary_active{
    outline: solid 12px darkviolet;
}
.boundary{
    background:cyan; 
    position:relative;
    width:200px;
    height:200px;
    margin-top:50px;
    margin-left:10px;
}

HTML：

<div class="boundary">  
    <p>droppable</p>
</div>

<div class="draggable-elem drag1">1</div>
<div class="draggable-elem drag2">2</div>

jQuery的：

 jQuery('.boundary').droppable({        
    over : function( event, ui ) { 
        jQuery(ui.helper).css('background', 'blue').text('OVER DROPPABLE'); 
    },
    out : function( event, ui ) { 
         jQuery(ui.helper).css('background', 'red').text('draggable');    
    },
    drop : function(ev, ui) {    
          this_clone = jQuery(ui.helper).clone(false)
          .css({position:'absolute', left:0, top:0})
          .removeClass('ui-draggable')
          .removeClass('ui-draggable-dragging')
          .removeClass('draggable-elem')
          .addClass('droppable-elem')
          .addClass('ui-droppable');
          jQuery('.boundary').append(this_clone);//append to boundary
    },
    accept : '.draggable-elem',
    activeClass : 'boundary_active',
    tolerance : 'fit'
});

jQuery( '.draggable-elem' ).draggable({
    helper : 'clone',
});

jQuery('.dropped-elem').droppable({
    greedy : true,
    over : function( event, ui ) { 
        jQuery(ui.helper).css('background', 'yellow').text('OVER DRAGGABLE'); 
    },
    accept : '.none',
    tolerance: 'touch',
    activeClass : 'boundary_active',
});

Answer 1

您可以使用tolerance选项：

指定用于测试可拖动的模式   盘旋在一个droppable上。可能的值：


“fit”：Draggable完全覆盖了droppable。

“intersect”：Draggable在两个方向上至少重叠50％的droppable。

“pointer”：鼠标指针与droppable重叠。

“touch”：可拖动任意数量的可拖放重叠。

在您的情况下，您可以使用touch。

演示：http://jsfiddle.net/6eGGT/

更新

您必须使用droppable将克隆元素设置为droppable，然后查看现在未选择任何内容的接受选择器（.none选择器）。

演示：http://jsfiddle.net/PmjW6/

jQuery UI嵌套droppables - 使draggable成为droppable

1 个答案:

更新