亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JQuery UI Sortable - 如何對一個容器中的兩種類型的項目進行排序

JQuery UI Sortable - 如何對一個容器中的兩種類型的項目進行排序

慕婉清6462132 2023-09-18 10:19:04
我想對同一容器中的兩種類型的項目（不同的類名）進行排序。每種類型的項目都應在其自身之間進行排序，而不會干擾其他項目類型。我嘗試了這段代碼：但它不起作用：$('#myItemsContainer').sortable({    items: '.sortType1',    start: function(event, ui) {    },    change: function(event, ui) {    },    update: function(event, ui) {    }});$('#myItemsContainer').sortable({    items: '.sortType2',    start: function(event, ui) {    },    change: function(event, ui) {    },    update: function(event, ui) {    }});HTML：<div id="myItemsContainer"><div class="sortType1">Item Type 1</div><div class="sortType1">Item Type 1</div><div class="sortType1">Item Type 1</div><div class="sortType2">Item Type 2</div><div class="sortType2">Item Type 2</div><div class="sortType2">Item Type 2</div></div>
查看完整描述

2 回答

?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

如前所述，您必須將它們包含在自己的容器中。這是一個例子。


$(function() {

  $("#myItemsContainer .list:eq(0)").sortable({

    items: "> .sortType1"

  });

  $("#myItemsContainer .list:eq(1)").sortable({

    items: "> .sortType2"

  });

});

#myItemsContainer {

  list-style-type: none;

  margin: 0;

  padding: 3px;

  width: 60%;

  border: 1px solid #000;

}


#myItemsContainer div[class^='sortType'] {

  margin: 0 3px 3px 3px;

  padding: 0.4em;

  padding-left: 1.5em;

  font-size: 1.4em;

  height: 18px;

  border: 1px solid #CCC;

}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="myItemsContainer">

  <div class="list">

    <div class="sortType1">Item Type 1</div>

    <div class="sortType1">Item Type 1</div>

    <div class="sortType1">Item Type 1</div>

  </div>

  <div class="list">

    <div class="sortType2">Item Type 2</div>

    <div class="sortType2">Item Type 2</div>

    <div class="sortType2">Item Type 2</div>

  </div>

</div>


查看完整回答
反對 回復 2023-09-18
?
動漫人物

TA貢獻1815條經驗 獲得超10個贊

您可以通過更新小部件items的選項來實現這種行為sortable。并且，您可以在鼠標懸停在項目上時更新它：


<div id="myItemsContainer">


    <div class="sortType1">Item Type 1</div>

    <div class="sortType1">Item Type 1</div>

    <div class="sortType1">Item Type 1</div>


    <div class="sortType2">Item Type 2</div>

    <div class="sortType2">Item Type 2</div>

    <div class="sortType2">Item Type 2</div>


</div>

$(function() {


    var elm = $('#myItemsContainer'); // cache for performance


    elm.sortable({

        items: '> .sortType1' // start with default selector

    }).on('mouseover', 'div', function(e) {


        if ($(e.currentTarget).hasClass('sortType1')) {

            // limit items to sortType1

            elm.sortable('option', 'items', '> .sortType1');

        } else {

            // limit items to sortType2

            elm.sortable('option', 'items', '> .sortType2');

        }

    });

});


查看完整回答
反對 回復 2023-09-18
  • 2 回答
  • 0 關注
  • 138 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號