jQuery UIソート可能なドラッグ要素のスナップ

Question

要素をドラッグしている間にスナップをとる方法はありますか？例えば、それ自体をドラッグしている間は要素自体が大きすぎるので、小さな要素しか表示されません。またはImはあなたがドラッグされた要素を制御することができますhelper機能を使用して、それを

Answer 1

をドラッグしながら、私は、要素をドラッグし始めたが、私は別の何かを表示したい場合：

$(function() { 
 
    $("#sortable").sortable({ 
 
    helper: function(ev, ui) { 
 
     return ui.clone().text('This item is currently being dragged') 
 
    } 
 
    }); 
 
    $("#sortable").disableSelection(); 
 
})

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
 
#sortable li span { position: absolute; margin-left: -1.3em; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
 
<script src="//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.js"></script> 
 

 
    
 
<ul id="sortable"> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
 
</ul>

を