JQuery拖放響應性

Question

我正在用jquery拖放創建拖放應用程序。 我想讓拖動到可拖拽目標上的元素響應。 如何做到這一點？

Answer 1

參考這些URL

droppable

draggable

Answer 2

看看這是你在找什麼。

(function($) { 
 
    $("#sortable").sortable(); 
 
    $("#sortable").disableSelection(); 
 
})(jQuery);

.wrapper { 
 
    display: flex; 
 
    width: 50%; 
 
    margin: 50px auto; 
 
    background: #DDD; 
 
    justify-content: center; 
 
    padding: 12px; 
 
    border-radius: 8px; 
 
} 
 

 
#sortable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    } 
 

 
    #sortable li { 
 
    margin: 0 3px 3px 3px; 
 
    padding: 5px; 
 
    line_height: 8px; 
 
    padding-left: 1.5em; 
 
    font-size: 1.4em; 
 
    } 
 
    
 
    #sortable li span { 
 
    position: relative; 
 
    left: -30px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="wrapper"> 
 

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

 
</div>