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

Question

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

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

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

Answer 1

Use a data attribute in the div to hold the index. Use the on onDrag and onDrop events to renumber the data attribute for each div within the container. Then return the new index number.

Answer 2

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>

Answer 3

Consider the following.

Example: 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();

When you use clone for the draggable, it will not clone data or events applied to it. So if we add an Attribute that can store the data, this will carry across with the drag.

When I review the structure, it seems a bit confused. I would stick to using all unique IDs or remove the IDs where you can and make better use if Classes.