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

贊助區

itCoin:

3ExcHdua3crim67XdnGhTVMq6hTRawgkCu

Ethereum:

0xb1f6c1880c058a4b7d1ee06d325411c1c1de3573

Crypto.com(虛擬貨幣入門選擇，用我連結註冊馬上送 $25美金)

派網 (網格交易第一選擇，新手必推)

幣安 Binance (第一名交易所，點擊註冊，送獎勵)

ByBit (體驗最好的交易所，點擊註冊送獎勵)

幣託 BitoPro (台灣虛擬貨幣換成台幣必備，點擊註冊) :

數字貨幣貪婪恐慌指數

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/