使用jQuery拖放元素

时间:2016-11-13 22:02:57

标签: javascript jquery twitter-bootstrap drag-and-drop jquery-ui-draggable

也许你可以帮助我,我想用可拖动(不是克隆)div创建一个列,我可以将其放入容器中,该容器由四个div组成(bootstrap col-md-3)。可拖动元素有两种尺寸:col-md-3或col-md-6。我找到了类似的东西(http://jsfiddle.net/py3DE/),但我不能重写它才能正常工作

    $(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone',
    start: function(ev, ui){ ui.helper.width($(this).width()); }                    // ensure helper width
});

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight',
    drop: function(ev, ui){
        var item = ui.draggable;
        if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it
        this.innerHTML = '';                                                        // clean the placeholder
        item.css({ top: 0, left: 0 }).appendTo(this);                                // append item to placeholder
    }
});

$(".target").on('click', '.closer', function(){
    var item = $(this).closest('.item');
    item.fadeTo(200, 0, function(){ item.remove(); })
});

1 个答案:

答案 0 :(得分:0)

如果你将'item.clone()。draggable()'更新为'item.draggable()',它将不会克隆。

js code

  if (!ui.draggable.closest('.empty').length) item = item.draggable()