jquery ui sortable + draggable 获取拖动项的当前索引

问题描述

我想获取拖动项目的当前索引。附上场景图片。

首先我将 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();

解决方法

在 div 中使用 data 属性来保存索引。使用 onDrag 和 onDrop 事件为容器内的每个 div 重新编号数据属性。然后返回新的索引号。

,

使用更新函数，然后使用函数 (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>

,

考虑以下事项。

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

JavaScript

var MasterContainer = {
  "title": "Untitled Form","controls": []
};

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

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

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

当您将 clone 用于可拖动对象时，它不会克隆应用到它的 data 或 events。因此，如果我们添加一个可以存储数据的 Attribute，这将通过拖动进行。

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