如何將div拖放到另一個

Question

現在我的程序可以動態創建正方形的行（12行2行）。當你雙擊其中一個方塊時，會彈出一個顏色選擇器，然後你可以指定該方塊的顏色。

但是，我想實現一個「快捷方式」，以便如果您將已經彩色的正方形拖到另一個正方形上，那麼這個新正方形也會被着色。

我迄今所做的：

http://codepen.io/blazerix/pen/rrwPAK

var id_num = 1; 
var picker = null; 
$(function() { 
$(document).on('click', ".repeat", function (e) { 
    e.preventDefault(); 
    var $self = $(this); 
    var $parent = $self.parent(); 
    if($self.hasClass("add-bottom")){ 
     $parent.after($parent.clone(true).attr("id", "repeatable" + id_num)); 
     id_num = id_num + 1; 
     //picker = null; 

    } else { 
     $parent.before($parent.clone(true).attr("id", "repeatable" + id_num)); 
     id_num = id_num + 1; 
     //picker = null; 
    } 
}); 
}); 

$(".startLEDs").draggable({ 
revert:true 
}); 

我曾嘗試使用從JQuery的可拖動功能，但注意到，當我嘗試拖動箱子，整個DIV消失。而且，我也只希望這些盒子可以拖動和放置，沒有別的。

任何幫助或反饋非常感謝！

Answer 1

這是我到目前爲止，但由於id屬性克隆後不是唯一的，它有一些怪癖。

工作實例：https://jsfiddle.net/Twisty/aqfn34bs/

HTML

<div class="bottomdiv"> 
    <div class="container"> 
    <div id="repeatable-0"> 
     <button class="repeat add-top">Add above</button> 
     <ul class="repeatable"> 
     <li class="startLEDs" id="sLED1"></li> 
     <li class="startLEDs" id="sLED2"></li> 
     <li class="startLEDs" id="sLED3"></li> 
     <li class="startLEDs" id="sLED4"></li> 
     <li class="startLEDs" id="sLED5"></li> 
     <li class="startLEDs" id="sLED6"></li> 
     <li class="startLEDs" id="sLED7"></li> 
     <li class="startLEDs" id="sLED8"></li> 
     <li class="startLEDs" id="sLED9"></li> 
     <li class="startLEDs" id="sLED10"></li> 
     <li class="startLEDs" id="sLED11"></li> 
     <li class="startLEDs" id="sLED12"></li> 
     <li class="endLEDs" id="eLED1"></li> 
     <li class="endLEDs" id="eLED2"></li> 
     <li class="endLEDs" id="eLED3"></li> 
     <li class="endLEDs" id="eLED4"></li> 
     <li class="endLEDs" id="eLED5"></li> 
     <li class="endLEDs" id="eLED6"></li> 
     <li class="endLEDs" id="eLED7"></li> 
     <li class="endLEDs" id="eLED8"></li> 
     <li class="endLEDs" id="eLED9"></li> 
     <li class="endLEDs" id="eLED10"></li> 
     <li class="endLEDs" id="eLED11"></li> 
     <li class="endLEDs" id="eLED12"></li> 
     </ul> 
     <div class="timeMilli">Time(ms): 
     <input type="text" name="time" form="form1"> 
     </div> 
     <button class="repeat add-bottom">Add below</button> 
    </div> 
    </div> 
</div> 

我一直在尋找在使用sortable，所以我把它切換到無組織的清單在我的測試，然後又回到draggable但仍舔顏色列表與鏈接。如果你願意，我懷疑你可以回覆。

CSS

div.bottomdiv { 
    clear: both; 
    position: fixed; 
    bottom: 0; 
    height: 50%; 
    width: 100%; 
    font-size: 16px; 
    text-align: center; 
    overflow: auto; 
} 

.container { 
    margin-top: 60px; 
    float: left 
} 

.timeMilli { 
    position: relative; 
    display: inline-block; 
} 

ul.repeatable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 408px; 
} 

ul.repeatable li { 
    width: 30px; 
    height: 30px; 
    float: left; 
    margin: 1px 1px 1px 0; 
    background-color: #ccc; 
    border: 1px solid #000000; 
} 

b { 
    position: relative; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background-color: #ccc; 
    border: 1px solid #000000; 
} 

.repeat { 
    display: flex; 
    flex-direction: nowrap; 
    flex-wrap: nowrap; 
} 

.repeat > * { 
    flex: 0 0 30px; 
} 

小調這裏ul和li變化。

jQuery的

$(function() { 
    function setColor(obj, r) { 
    obj.css('background-color', r); 
    obj.attr("data-color", r); 
    } 

    function makeDrag(obj) { 
    obj.draggable({ 
     helper: "clone", 
     opacity: 0.85 
    }); 
    } 

    function makeDrop(obj) { 
    obj.droppable({ 
     accept: ".repeatable li", 
     drop: function(e, ui) { 
     if (ui.helper.data("color")) { 
      setColor($(this), ui.helper.data("color")); 
      makeDrag($(this)); 
     } 
     } 
    }); 
    } 

    $(document).on('click', ".repeat", function(e) { 
    e.preventDefault(); 
    var $self = $(this); 
    var $parent = $self.parent(); 
    var id_num = $("div[id^='repeatable']").length; 
    if ($self.hasClass("add-bottom")) { 
     $parent.after($parent.clone(true).attr("id", "repeatable-" + id_num)); 
     makeDrop($("#repeatable-" + id_num + " .repeatable li")); 
     makeDrag($("#repeatable-" + id_num + " .repeatable li[data-color^='#']")); 
    } else { 
     $parent.before($parent.clone(true).attr("id", "repeatable-" + id_num)); 
     makeDrop($("#repeatable-" + id_num + " .repeatable li")); 
     makeDrag($("#repeatable-" + id_num + " .repeatable li[data-color^='#']")); 
    } 
    }); 

    $(".repeatable li").on("dblclick", function(e) { 
    $(this).spectrum({ 
     color: "#f00", 
     change: function(color) { 
     setColor($(this), color.toHexString()); 
     makeDrag($(this)); 
     } 
    }); 
    }); 

    makeDrop($(".repeatable li")); 
}); 

我不認爲有必要在全球的id_num和picker變量。由於我們將改變顏色，可拖動和可拖放的方式，因此我創建了多個函數來重複執行此操作。

所以可以拖動本身不會完成你所需要的。您需要使用droppable才能在拖放項目被刪除時採取行動。例如，它有一個out和over事件，您可以在其覆蓋它時覆蓋該框，然後在拖出時恢復該顏色。現在，我們堅持基本操作：我們使用雙擊事件設置顏色，然後可以將該顏色拖動到其他附近的框中，並且該框的顏色在被放置時設置爲相同的顏色。

現在，如果我們克隆事物之前或之後，事情變得粘稠。稍後再看看，但這會讓你現在前進。