[Javascript] 關於拖曳(jQuery UI sortable) 的一些操作(一)

2016-08-17

最近專案要用到一些東西想說紀錄一下,主要就是拖曳的一些需求,基本上都是參考來自於 jQuery UI (  https://jqueryui.com/sortable/ )
image

記得先引入需要的 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/


當麻許的超技八 2014 | Donma Hsu Design.