我通过jQuery UI使用可排序小部件。我可以在不使用handle
选项的情况下使其工作。使用handle
选项通过li
移动<button>
时,我无法正常工作。出了什么问题?
$( ".one" ).sortable({
handle: ".move"
});
$( ".two" ).sortable({});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<h1>one</h1>
<ul class="one">
<li>One <button class="move">Move</button></li>
<li>Two <button class="move">Move</button></li>
<li>Three <button class="move">Move</button></li>
<li>Four<button class="move">Move</button></li>
</ul>
<h1>two</h1>
<ul class="two">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
上的示例
答案 0 :(得分:1)
您的按钮没有.handle
课程,您需要使用.move
。另请注意,使用按钮并不是一个好主意,因为他们已经拥有自己的点击逻辑。我建议使用div
或任何其他非表单输入元素。
$( ".one" ).sortable({ handle: ".move" });
$( ".two" ).sortable({});
&#13;
.move {
display: inline-block;
background: #c00;
color: #fff;
padding: 2px;
margin: 1px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<h1>one</h1>
<ul class="one">
<li>One
<div class="move">Move</div>
</li>
<li>Two
<div class="move">Move</div>
</li>
<li>Three
<div class="move">Move</div>
</li>
<li>Four
<div class="move">Move</div>
</li>
</ul>
<h1>two</h1>
<ul class="two">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
&#13;
答案 1 :(得分:1)
简单。不要将<button>
用于不应该是按钮的内容。它不是很好的语义,jQueryUI会忽略按钮作为句柄元素 - 因为它是一个表单动作元素,而不是移动句柄。