Question

我正在使用这个小提琴的修改版本：JSFIDDLE

我想知道如果将原始元素放在正确的盒子上，如何隐藏或制作不可剥离的元素。

EG。如果我拖动框＃34;我是4＆＃34;在一个接受它的盒子上，盒子留在那里。应禁止将原始框拖到另一个框中。

JS CODE：

<script type='text/javascript'>
$(window).load(function(){
$(".DragItem").draggable({
    revert: "invalid",
    start: function(){
        $(this).data("origPosition",$(this).position());
        },
    helper: "clone"
});

$(".DropItem").droppable({
    accept: ".DragItem",
    over: hover_drop,
    out: out_drop,
    drop: function( event, ui ) { 
            if($(this).attr("id").indexOf($(ui.draggable).attr("id")) > -1)
                { 
                  $(this).append($(ui.helper).clone()); 
                  $(this).removeClass('DropTargetValid DropTargetInvalid');
                } 
                else 
                { 
                  var newrrr =  $(ui.helper).clone();       
                  $(this).append(newrrr);
                  newrrr.animate(ui.draggable.data().origPosition,"slow").fadeOut("slow"); 
                  $(this).removeClass('DropTargetValid DropTargetInvalid'); 
                }
    }
});

function hover_drop( event, ui ) { 
        //console.log($(ui.draggable).position());
        if ($(this).attr("id").indexOf($(ui.draggable).attr("id")) > -1){
            $(this).addClass('DropTargetValid');
        } else {
            $(this).addClass('DropTargetInvalid');
        }
    }
function out_drop( event, ui ) { 
            $(this).removeClass('DropTargetValid DropTargetInvalid');
    }
}); 
</script>

Answer 1

为什么不简单地不使用克隆？

http://jsfiddle.net/vm9DS/35/

$(".DragItem").draggable({
    revert: 'invalid'
});

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid'

});

$(".drop2").droppable({
    accept: '#2,#3',
    activeClass: 'DropTargetValid'

});

$(".drop3").droppable({
    accept: '#3,#4',
    activeClass: 'DropTargetValid'

});

$(".drop4").droppable({
    accept: '.DragItem',
    activeClass: 'DropTargetValid'

});

但如果你真的想把它们放在首位：

http://jsfiddle.net/vm9DS/42/

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).draggable( 'disable' );
        $(ev.target).append(ui.draggable.clone());

    }
});

如果你想重新启用它们：

$("myselector").draggable('enable');

修正：

http://jsfiddle.net/vm9DS/45/

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        var id = $(ui.draggable).attr("id");
        $(ev.target).append(ui.draggable.clone());
        $("#" + id).draggable('disable');  
    }
});

Answer 2

为你的html“dragFromHere”添加了新的ID。请检查更新的小提琴。

http://jsfiddle.net/vm9DS/32/

<div style="margin-bottom:20px;" id="dragFromHere">
    <div id="1" class="DragItem drag1">I am 1</div>
    <div id="2" class="DragItem drag1">I am 2</div>
    <div id="3" class="DragItem drag2">I am 3</div>
    <div id="4" class="DragItem drag2">I am 4</div>
</div

并在JS中添加以下行。

$(".drop1").droppable({
    accept: '#1,#2,#3',
    activeClass: 'DropTargetValid',
    drop: function (ev, ui) {
        $(ev.target).append(ui.draggable.clone());
        $('#dragFromHere').find('#1').remove();
    }
});

掉落后移除原始元素

2 个答案: