代码之家 › 专栏 › 技术社区 › Nayas Subramanian

jquery ui可排序+可拖动获取拖动项的当前索引

jquery-ui-draggable jquery-ui-sortable jquery-ui jquery javascript

Nayas Subramanian · 技术社区 · 4 年前

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

首先,我将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 回复 | 直到 4 年前

NealM 4 年前

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

Bourbia Brahim 4 年前

使用update函数,然后使用函数的第二个参数(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>

Twisty 4 年前

请考虑以下几点。

例子: 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 对于draggable,它不会进行克隆 data 或 events 因此,如果我们添加一个可以存储数据的属性,这将与拖动一起进行。

当我回顾结构时,它似乎有点混乱。我会坚持使用所有唯一的ID,或者在可能的情况下删除ID,更好地利用if类。