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 中使用数据属性来保存索引。使用 onDrag 和 onDrop 事件对容器内每个 div 的数据属性重新编号。然后返回新的索引号。

Answer 2

使用更新函数，然后函数（ui）的第二个参数获取索引为：ui.item.index()

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

参见下面的工作 sn-p ：

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。所以如果我们添加一个可以存储数据的Attribute，这会随着拖拽而发生。

当我查看结构时，似乎有点困惑。我会坚持使用所有唯一 ID，或者尽可能删除 ID，以便更好地使用 Classes。