這是我到目前爲止,但由於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
事件,您可以在其覆蓋它時覆蓋該框,然後在拖出時恢復該顏色。現在,我們堅持基本操作:我們使用雙擊事件設置顏色,然後可以將該顏色拖動到其他附近的框中,並且該框的顏色在被放置時設置爲相同的顏色。
現在,如果我們克隆事物之前或之後,事情變得粘稠。稍後再看看,但這會讓你現在前進。
目前還不清楚你想要完成什麼。什麼不工作?你如何期待它的工作? – Twisty
@Twisty所以如果你評論我添加的可拖動代碼,你會發現如果你雙擊一個盒子,一個顏色選擇器會彈出,你可以選擇一種顏色。我試圖做到這樣,一旦爲特定的盒子選擇了顏色,用戶就可以將該顏色拖到另一盒子上,而不必再次通過顏色選擇器。 – blazerix
好吧,如果沒有顏色,它不應該拖動。如果選擇了顏色,則可以將該顏色拖動到另一個顏色以將顏色複製到該目標,作爲着色的替代方法。是這個嗎? – Twisty