[Javascript] 關於拖曳(jQuery UI sortable) 的一些操作(二)
2016-08-17
上一篇文章我們談到一些關於jQuery UI 拖曳 的一些操作我們繼續把它說完
首先依然不要忘記引入jQuery , jQuery UI 的 JS and CSS
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><link href="//code.jquery.com/ui/1.11.3/jquery-ui.min.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>3. 複製型，並且可以被丟棄，效果像是這樣
主要效果就是目標物拖出去外面就把它移除掉
HTML:
<p style="background: red; color: white; text-align: center">複製 可丟棄</p><div>
目標 :
<div id="ul_Target3" class="sortgroup3" style="background: #000000; width: 200px; padding: 10px; min-height: 50px"></div>
</div>
<div>
來源 :
<div id="ul_Source3" class="sortgroup3" style="background: #2f4f4f; width: 200px; padding: 10px;min-height: 50px">
<div class="sourceItem sourceItem3">S1</div>
<div class="sourceItem sourceItem3">S2</div>
<div class="sourceItem sourceItem3">S3</div>
<div class="sourceItem sourceItem3">S4</div>
<div class="sourceItem sourceItem3">S5</div>
</div>
</div>
Javascript:
<script>
$(".sourceItem3").draggable({ helper: "clone", connectToSortable: ".sortgroup3"});
$("#ul_Target3").sortable( {receive: function (e, ui) { isOut = false; },
over: function (e, ui) { isOut = false; },
out: function (e, ui) { isOut = true; },
beforeStop: function (e, ui) { if (isOut) {$(ui.item).remove();
}
}
}).disableSelection();
</script>
主要關鍵在於，透過一個變數去判斷isOut 只要是out 完全成立時就進行移除。
source : https://jsfiddle.net/no2don/35br3zdz/
4. 複製型可移除且不可重複加入
主要在於重複的是不能夠加入的
HTML:
<p style="background: red; color: white; text-align: center">複製 可丟棄 且不能重複加入</p>
<div>
目標 :
<div id="ul_Target4" class="sortgroup4" style="background: #000000; width: 200px; padding: 10px; min-height: 50px"></div>
</div>
<div>
來源 :
<div id="ul_Source4" class="sortgroup4" style="background: #2f4f4f; width: 200px; padding: 10px;min-height: 50px">
<div id="s1" class="sourceItem sourceItem4">S1</div>
<div id="s2" class="sourceItem sourceItem4">S2</div>
<div id="s3" class="sourceItem sourceItem4">S3</div>
<div id="s4" class="sourceItem sourceItem4">S4</div>
<div id="s5" class="sourceItem sourceItem4">S5</div>
</div>
</div>
Javacript:
<script>
$(".sourceItem4").draggable({ helper: "clone", connectToSortable: ".sortgroup4"});
var tmpItem; var isOut; $("#ul_Target4").sortable( {receive: function (event, ui) {
isOut = false;$(tmpItem).attr("data-mark", $(ui.item).attr('id'));
if (CheckElementDuplicate($(ui.item).attr('id'), 'ul_Target4')) {
$(tmpItem).remove();
}
},
over: function (e, ui) { isOut = false; },
out: function (e, ui) { isOut = true; },
beforeStop: function (e, ui) {tmpItem = $(ui.item);
if (isOut) {$(ui.item).remove();
}
}
}).disableSelection();
function CheckElementDuplicate(checkId, containerId) {$('#log1').append($('#' + containerId).children().length + ',');
var res = false;
for (var i = 0; i < $('#' + containerId).children().length - 1; i++) {
if ($('#' + containerId).children().eq(i).data('mark') == checkId) {
res = true; break;}
}
return res;}
</script>
其中 CheckElementDuplicate 參數傳入 拉進去的該物件id , 還有目標target 的container id 我就負責把它給比對移除
source: https://jsfiddle.net/no2don/16bgzpar/