Question

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

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

的CSS：

*{ margin:0 }

.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; 
    margin: 0 auto;
    position:relative;
    width:200px;
    height:200px;
    margin-top:50px;
}

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('OUTSIDE DROPPABLE'); 
    },
    drop : function(ev, ui) { 
        clone = jQuery(clone.helper).clone(false);
        jQuery('.boundary').append(clone);
    },
    accept : '.draggable-elem',
    activeClass : 'boundary_active',
    tolerance : 'fit'
});

jQuery('.draggable-elem').droppable({
    over : function( event, ui ) { 
        jQuery(ui.helper).css('background', 'yellow').text('OVER DRAGGABLE'); 
    },
    accept : false,
    tolerance : 'fit',
    activeClass : 'boundary_active',
    revert : 'invalid'
});


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

jQuery UI - 检测可拖动是否超过另一个已被删除的可拖动

0 个答案: