[Javascript] 關於拖曳(jQuery UI sortable) 的一些操作(一)
2016-08-17
最近專案要用到一些東西想說紀錄一下，主要就是拖曳的一些需求，基本上都是參考來自於 jQuery UI ( https://jqueryui.com/sortable/ )
記得先引入需要的 css and js
<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>1. 基本型 互相的拖曳
HTML:
<div>
目標 :
<ul id="ul_Target1" class="sortgroup1" style="background: #000000;
width: 200px; padding: 10px;min-height: 50px"></ul>
</div>
<div>
來源 :
<ul id="ul_Source1" class="sortgroup1" style="background: #2f4f4f; width: 200px;
padding: 10px;min-height: 50px">
<li class="sourceItem">S1</li>
<li class="sourceItem">S2</li>
<li class="sourceItem">S3</li>
<li class="sourceItem">S4</li>
<li class="sourceItem">S5</li>
</ul>
</div>
Javascript:
<script>
$(function () { $("#ul_Target1, #ul_Source1").sortable({ connectWith: ".sortgroup1"}).disableSelection();
});
</script>
非常的簡單值得一提的是 connectWith 只要設定同一個群組就可以讓兩個互相拖曳這算是基本範例
結果:
2.拖曳複製型，就是從來源端拖曳到目標端，但是目的在複製
HTML:
<div>
目標 :
<div id="ul_Target2" class="sortgroup2" style="background: #000000; width: 200px; padding: 10px; min-height: 50px"></div>
</div>
<div>
來源 :
<div id="ul_Source2" class="sortgroup2" style="background: #2f4f4f; width: 200px; padding: 10px;min-height: 50px">
<div class="sourceItem sourceItem1">S1</div>
<div class="sourceItem sourceItem1">S2</div>
<div class="sourceItem sourceItem1">S3</div>
<div class="sourceItem sourceItem1">S4</div>
<div class="sourceItem sourceItem1">S5</div>
</div>
</div>
Javascript:
<script>
$(".sourceItem1").draggable({ helper: "clone", connectToSortable: ".sortgroup2"});
$("#ul_Target2").sortable({receive: function (event, ui) {
//改變Source 那邊的物件狀態$(ui.item).css("background", "gray");
},
beforeStop: function (event, ui) {
//改變Target 那邊的物件狀態$(ui.item).css("background", "yellow");
}
}).disableSelection();
</script>
在這一範例中，我讓 class : sourceIte1 的設定成可拖曳並且 helper 參數設成clone 讓他只被 class 為 sortgroup2 的可接受，這邊我讓被拖曳過的變成灰色，然後設定拖曳進去的變成黃色，這樣以後要操控那個物件可以快速的參考一下。
結果:
source code :
基本款: https://jsfiddle.net/no2don/7k5f7mkc/1/
複製款: https://jsfiddle.net/no2don/ao724pxd/