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。