jQueryソート可能なプラグイン - ターゲットアイテムの上にマウスを移動すると、そのアイテムのIDを取得します

Question

jQueryソート可能なプラグインを使用してアイテムをリスト間で移動しています。アイテムをドラッグしている間は、最初にそのアイテムのIDを取得してから、値が同じであれば置き換えるアイテムのIDを取得するか、値が異なる場合はアイテムを元のリストに戻します。

選択したアイテムのIDを取得できます。

ターゲットアイテムの上にマウスを移動すると、そのアイテムのIDを取得する方法はありますか？

sortable1リストからのアイテムをsortable2に移動したいので、2番目のリストを無効にするように設定しました。

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

<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>

私が持っている最も近い解決策は以下のとおりです。

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

Answer 1

あなたはaddClass/removeClassでenable/disableを入れて、この方法でdroppable

でIDをretriveよりもすべきであるreceive有効かどうかを確認してください。あなたは、同じIDを持つ要素を持っているカント

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

<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>