jQuery ui sortable + draggable获取被拖动项的当前索引 [英] jquery ui sortable + draggable get current index of the dragged item

问题描述

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

I want to get the current index of the dragged item. Image attached of the scenario.

首先，我将div拖到主容器中，然后必须从主容器中获取索引，即0.

First I drag the div to the master container then I have to get the index from master container ie is 0.

然后我将相同的元素拖到子容器中，然后需要从子容器中获取索引，即1.

Then I drag the same element to the child container then I need to get the index from the child container ie is 1.

我添加了此小提琴，以显示我的代码现在的状态.

I have added this Fiddle to show how my code is right now.

('.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();

推荐答案

使用update函数，然后使用函数(ui)的第二个参数获取索引，如下所示:ui.item.index()

Use the update function , then second param of the function (ui) to get the index as : ui.item.index()

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

请参见下面的工作片段:

See below working snippet :

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>

这篇关于jQuery ui sortable + draggable获取被拖动项的当前索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！