Question

我正在使用jquery拖放创建拖放应用程序。我想将元素拖到可放置的目标上以便响应。怎么做？

Answer 1

参考这些网址

droppable

draggable

Answer 2

看看这是否是您正在寻找的。

＆＃13;

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

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

JQuery拖放响应

2 个答案: