jQuery UI 嵌套 droppables - 使draggable成为droppable

Question

我希望能够将可拖动对象拖动到可放置对象中。然后，当我拖入另一个可拖动对象时，会阻止用户将其放置在之前放置的可拖动对象上，但仍会将其放置在可放置对象上。这是一个非常荒谬的句子，我在下面添加了一张图片来说明，以及到目前为止我在这里尝试过的内容:http://jsfiddle.net/u4pAf/6/

下面是jsfiddle上的代码。只是一个尝试让某些东西发挥作用的演示。我认为检测可拖动对象是否位于已放置可拖动对象之上的最佳方法是使可拖动对象也可放置，并将接受参数设置为 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选项:

Specifies which mode to use for testing whether a draggable is hovering over a droppable. Possible values:

• "fit": Draggable overlaps the droppable entirely.
• "intersect": Draggable overlaps the droppable at least 50% in both directions.
• "pointer": Mouse pointer overlaps the droppable.
• "touch": Draggable overlaps the droppable any amount.

根据您的情况，您可以使用touch。

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

更新

您必须将克隆元素设置为可放置，通过在其上使用 droppable ，检查现在不选择任何内容的接受选择器(.none 选择器)。

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