JQUERY拖動和克隆整個div

我有一個框，當用戶單擊（持有）框的克隆必須創建，該克隆需要可拖動。然後用戶將克隆的紅色框放到黑盒中放入。我正在使用JQuery 1.9.1和JQuery UI，但我似乎無法得到正確的結果。有人可以幫忙嗎？JQUERY拖動和克隆整個div

這裏有一個jsFiddle

HTML

<div id='main'> 
    <div id='left'> 
     <div id='box'></div> 
    </div> 
    <div id='right'> 
     <div id='thespace'>Place in here</div> 
    </div> 
</div>

JQUERY

$(document).ready(function() { 
    $('#box').draggable({helper: "clone"}); 
    $('#box').bind('dragstop', function(event, ui) { 
     $(this).after($(ui.helper).clone().draggable().css('z-index','99999')); 
    }); 
});

這裏有一個jsFiddle

來源

2013-06-18 Sanya

JavaScript的：

$('.box').draggable({ 
    helper: "clone" 
}).on('dragstart', function (e, ui) { 
    $(ui.helper).css('z-index','999999'); 
}).on('dragstop', function (e, ui) { 
    $(this).after($(ui.helper).clone().draggable()); 
});

CSS：

.box{width:100px;height:100px;background-color:red;left:50px;top:50px;}

我改變了ID到一類，因爲克隆的元件將導致具有一堆的紅色方塊有相同的ID，這並不好，並且也消除了絕對位置初始廣場tioning，因爲它影響了克隆...

Working JSFiddle Demo

來源

2013-06-19 13:45:09 DarkAjax

關於擁有多個ID的好處。謝謝！ – Sanya

這是一個工作解決方案，不知道它是否最好。我將當前框添加到新容器中，並將克隆添加到原始位置，重新綁定偵聽器。

var dragConfig = { 
     start: function(){ 
      initialBox = $(this).clone(); 
      initialBox.draggable(dragConfig); 
     }, 
     stop: function(){ 
      $(this).appendTo("#"+currentHoverID); 
      initialBox.appendTo("#left"); 
     } 
    };

工作的jsfiddle：http://jsfiddle.net/WEtr4/3/

來源

2013-06-18 23:47:02 pierdevara

謝謝！我不認爲小提琴更新顯示您的新代碼。你能更新小提琴嗎？ – Sanya

抱歉貼錯了小提琴。盒子的位置是關閉的，因爲它克隆了你的腹肌定位，但是如果你檢查了源頭，你可以看到它實際上是一個「thespace」的孩子 – pierdevara

JQUERY拖動和克隆整個div

回答

相關問題