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

Posted 2023-05-08

【中文标题】jquery ui sortable + draggable 获取被拖动项目的当前索引

【英文标题】：jquery ui sortable + draggable get current index of the dragged item

【发布时间】：2021-05-02 11:03:40

【问题描述】：

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

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

【参考方案1】：

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

【参考方案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>

【讨论】：

你能检查一下答案吗，希望我能理解你的问题！

有了这个我们只是得到容器的索引不是。这不能解决我的问题。甚至子容器也是动态创建的。从我创建的小提琴中，可以将多个 Div 拖到任何容器和任何容器中。我想获取当前容器中每个 div 的索引。

@NayasSubramanian 啊，好吧，我在想你想要容器的 id，而不是拖动的项目，请参阅更新的 asnwer

总是以 -1 作为索引。

你可以在这里查看fiddle

【参考方案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。

【讨论】：

这就是我得到的“ID：masterConatiner，索引：0”“ID：childContainer，索引：0”“ID：masterConatiner，索引：0”“ID：masterConatiner，索引：0”

@NayasSubramanian 对于列表中的第一项“Div”来说听起来是正确的。您应该为第二项“列表”获得1：ID：masterConatiner, Index: 0 和ID: masterConatiner, Index: 1

第二个项目我也得到 0。

@NayasSubramanian 这表明索引元素存在问题。请编辑您的帖子并提供一个可重复的最小示例：***.com/help/minimal-reproducible-example