Question

我使用jQuery可排序插件将项目从一个列表移动到另一个列表。在我拖动项目的同时，它应首先获得该项目的ID，然后获取我悬停在其上的项目的ID，以便在值相同或将项目移回原始列表时替换它如果价值不同。

我可以获得所选项目的ID。

当我将鼠标悬停在目标项目上时，如何获取目标项目的ID？

我已将第二个列表设置为禁用，因为我只想将项目从sortable1列表移至sortable2。

＆＃13;

$(function() {
  $("ul.droptrue").sortable({
    connectWith: "ul",

    start: function(event, ui) {
      var itemId = ui.item.attr("id"); // Get id of source item
    }
  });

  $("ul.dropfalse").sortable({
    connectWith: "ul",
    dropOnEmpty: false
  });

  $("#sortable1, #sortable2").disableSelection();

  $("ul.dropfalse").sortable("disable"); // Disable second list
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<ul id="sortable1" class="droptrue">
  <li id="test1" class="ui-state-default"><label>Item 1</label></li>
  <li id="test2" class="ui-state-default"><label>Item 2</label></li>
  <li id="test3" class="ui-state-default"><label>Item 3</label></li>
</ul>

<ul id="sortable2" class="dropfalse">
  <li id="test4" class="ui-state-highlight"><label>Item 2</label></li>
  <li id="test5" class="ui-state-highlight"><label>Item 3</label></li>
  <li id="test6" class="ui-state-highlight"><label>Item 4</label></li>
</ul>

＆＃13;

我最接近的解决方案是：

$('.ui-state-highlight').mouseover(function() {
    alert(this.id);
});

Answer 1

您应该将enable/disable与addClass/removeClass放在一起，而不是使用droppable

来回复ID

使用方法receive检查它是否有效。

＆＃13;

$(function() {
  var $dropfalse = $("ul.dropfalse"),
      itemId,
      isvalid = false;
  $("ul.droptrue").sortable({
    connectWith: "ul",
    start: function(event, ui) {
      $dropfalse.removeClass("disabled");
      itemId = ui.item.attr("id"); // Get id of source item
    },
    stop: function(){
      $dropfalse.addClass("disabled");
    }
  });
  $("ul.dropfalse").sortable({
    connectWith: "ul",
    dropOnEmpty: false,
    cancel:".disabled",
    receive: function(event, ui) {
      console.log(isvalid);
      if(!isvalid){
        $(ui.sender).sortable('cancel');
        isvalid = false;
      }
    }
  });
  $("#sortable1, #sortable2").disableSelection();
  $dropfalse.addClass("disabled");
  $('#sortable2 .ui-state-highlight').droppable({
    over: function(){
      console.log(itemId, $(this).attr("id"));
      isvalid = true;
    }
  });
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<ul id="sortable1" class="droptrue">
  <li id="test1" class="ui-state-default"><label>Item 1</label></li>
  <li id="test2" class="ui-state-default"><label>Item 2</label></li>
  <li id="test3" class="ui-state-default"><label>Item 3</label></li>
</ul>

<ul id="sortable2" class="dropfalse">
  <li id="test4" class="ui-state-highlight"><label>Item 2</label></li>
  <li id="test5" class="ui-state-highlight"><label>Item 3</label></li>
  <li id="test6" class="ui-state-highlight"><label>Item 4</label></li>
</ul>

＆＃13;

jQuery可排序插件 - 在鼠标悬停在其上时获取目标项的ID

1 个答案: