jquery ui sortable + draggable 獲取被拖項目的當前索引

Question

我想獲取拖動項目的當前索引。 場景的附加圖像。

首先，我將 div 拖到主容器，然后我必須從主容器獲取索引，即0 。

然后我將相同的元素拖到子容器中，然后我需要從子容器中獲取索引，即1 。

我添加了這個Fiddle來展示我的代碼現在如何。

('.container').sortable({
connectWith: '.container',
 scroll: false,
    zIndex: 10000,
    placeholder: "control-placeholder",
    receive: function(event, ui){
      var id = event.target.id;
     alert(id);
     },});

 $( "#container1, #container2" ).draggable({
  connectToSortable: ".container",
  helper: "clone",
  revert: "invalid",
});


$( ".container" ).disableSelection();

Answer 1

在 div 中使用數據屬性來保存索引。 使用on onDrag 和onDrop 事件為容器內的每個div 重新編號數據屬性。 然后返回新的索引號。

Answer 2

使用更新 function，然后使用 function (ui) 的第二個參數獲取索引： ui.item.index()

update: function(e, ui) {
    let index = ui.item.index();
    console.log("dragged indx => "+index);
    
  }

請參閱下面的工作片段：

 var MasterContainer = { "title": "Untitled Form", "description": "Description of the form goes here", "controls": [] }; $('.container').sortable({ connectWith: '.container', scroll: false, zIndex: 10000, placeholder: "control-placeholder", start: function(e, ui) { // creates a temporary attribute on the element with the old index // credits to this answer $(this).attr('data-previndex', ui.item.index()); }, update: function(e, ui) { let index = ui.item.index(); console.log("dragged indx => "+index); }, receive: function(e, ui) { let id = e.target.id;; console.clear(); console.log("container id => "+ id) } }); $("#container1, #container2").draggable({ connectToSortable: ".container", helper: "clone", revert: "invalid", }); $(".container").disableSelection();

 .container { min-height: 200px; background-color: #4474FF; border: 1px solid #1E44B2; border-radius: 2px; display: inline-block; padding: 10px; }.container1 { display: inline-block; }.container.container { min-height: 100px; background-color: #45FF41; border: 1px solid #04B200; display: block; width: 200px; margin-bottom: 5px; }.item { background-color: #FFCB44; border: 1px solid #B2840C; margin-bottom: 5px; border-radius: 2px; padding: 15px 50px; }.item1 { background-color: #FFCB44; border: 1px solid #B2840C; margin-bottom: 5px; border-radius: 2px; padding: 10px 30px; width: 30px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <div class="container1"> <div id="container1" class="item1">Div</div> <div id="container2" class="item1">List</div> <div id="container3" class="item1">Button</div> </div> <div id="masterConatiner" class="container"> master container <div class="item"></div> <div id="childContainer" class="container"> ChildContainer </div> </div>

Answer 3

考慮以下。

示例： http://jsfiddle.net/Twisty/tsxz319r/44/

JavaScript

var MasterContainer = {
  "title": "Untitled Form",
  "description": "Description of the form goes here",
  "controls": []
};

$('.container').sortable({
  connectWith: '.container',
  scroll: false,
  zIndex: 10000,
  placeholder: "control-placeholder",
  receive: function(event, ui) {
    var id = event.target.id;
    console.log("ID: " + id + ", Index: " + ui.helper.data("start-index"));
  },
});

$("#container1, #container2").draggable({
  connectToSortable: ".container",
  helper: "clone",
  revert: "invalid",
  create: function(e, ui) {
    if ($(this).hasClass("item1")) {
      $(this).each(function(i, el) {
        $(el).data("start-index", i);
      });
    }
  },
  start: function(e, ui) {
    ui.helper.attr("data-start-index", $(this).index());
  }
});

$(".container").disableSelection();

當您對可拖動對象使用clone時，它不會克隆應用到它的data或events 。 因此，如果我們添加一個可以存儲數據的屬性，這將通過拖動進行。

當我回顧結構時，似乎有點混亂。 我會堅持使用所有唯一 ID 或盡可能刪除 ID，並更好地使用 Classes。