jQueryUI Draggable + Sortable 忽略句柄
jQueryUI Draggable + Sortable Ignores Handle
我主要想知道在结合 jQueryUI 的 Draggable 和 Sortable 插件时是否还有其他人 运行 遇到过这个问题。
如果我只是使用 Draggable 插件,它会遵循我在设置中指定的 handle
。然而,一旦我在放置目标上设置了 Sortable,Draggable 似乎就抛开了警告,让你拖动整个元素,完全忽略我指定的句柄。
$('.column-one, .column-two, .column-three').sortable({ revert : 150 });
$('.tile').parent().draggable({
start: function() {},
stop: function() {},
handle: '.tile-draggable',
connectToSortable: '.column-one, .column-two, .column-three'
});
我在这里设置了一个 JSFiddle,所以你可以看到我在说什么:
https://jsfiddle.net/4y8a8zpe/2/
注释掉 JS 的第一行以查看句柄是否正常工作。
Note: While setting up this JSFiddle, I've also seem to come across some weird CSS issues, but feel free to ignore that.
您或许可以选择其中之一 - 它们的功能非常相似。如果没有,sortable 也有句柄选项。
http://api.jqueryui.com/sortable/#option-handle
$('.column-one, .column-two, .column-three').sortable({
revert: 150,
handle: '.tile-draggable'
});
$('.tile').parent().draggable({
start: function() {},
stop: function() {},
handle: '.tile-draggable',
connectToSortable: '.column-one, .column-two, .column-three'
});
.column-one,
.column-two,
.column-three {
display: inline-block;
width: 320px;
height: 600px;
padding: 0 10px;
background-color: #fffbf2;
margin-right: 10px;
box-sizing: border-box;
}
.abstract_tile {
display: block;
width: 300px;
background-color: #fff2f6;
}
.tile {
width: 300px;
border: solid 1px #ccc;
}
.tile-top {
background-color: #e3ffec;
text-align: center;
padding: 10px;
}
.tile-bottom {
display: block;
width: 100%;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
}
.tile-footer {
background-color: #e3ffec;
text-align: center;
padding: 10px;
}
.tile-footer .left {
float: left;
}
.tile-footer .right {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="column-one">
<div class="abstract_tile">
<div class="tile">
<div class="capped-module primary">
<div class="wrap">
<div class="tile-top tile-draggable">
<h2>Title</h2>
</div>
<div class="tile-bottom">
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
</div>
<div class="tile-footer tile-draggable">
<div class="left">Move</div>
<div class="right">Add/Remove</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column-two"></div>
<div class="column-three"></div>
我主要想知道在结合 jQueryUI 的 Draggable 和 Sortable 插件时是否还有其他人 运行 遇到过这个问题。
如果我只是使用 Draggable 插件,它会遵循我在设置中指定的 handle
。然而,一旦我在放置目标上设置了 Sortable,Draggable 似乎就抛开了警告,让你拖动整个元素,完全忽略我指定的句柄。
$('.column-one, .column-two, .column-three').sortable({ revert : 150 });
$('.tile').parent().draggable({
start: function() {},
stop: function() {},
handle: '.tile-draggable',
connectToSortable: '.column-one, .column-two, .column-three'
});
我在这里设置了一个 JSFiddle,所以你可以看到我在说什么: https://jsfiddle.net/4y8a8zpe/2/
注释掉 JS 的第一行以查看句柄是否正常工作。
Note: While setting up this JSFiddle, I've also seem to come across some weird CSS issues, but feel free to ignore that.
您或许可以选择其中之一 - 它们的功能非常相似。如果没有,sortable 也有句柄选项。
http://api.jqueryui.com/sortable/#option-handle
$('.column-one, .column-two, .column-three').sortable({
revert: 150,
handle: '.tile-draggable'
});
$('.tile').parent().draggable({
start: function() {},
stop: function() {},
handle: '.tile-draggable',
connectToSortable: '.column-one, .column-two, .column-three'
});
.column-one,
.column-two,
.column-three {
display: inline-block;
width: 320px;
height: 600px;
padding: 0 10px;
background-color: #fffbf2;
margin-right: 10px;
box-sizing: border-box;
}
.abstract_tile {
display: block;
width: 300px;
background-color: #fff2f6;
}
.tile {
width: 300px;
border: solid 1px #ccc;
}
.tile-top {
background-color: #e3ffec;
text-align: center;
padding: 10px;
}
.tile-bottom {
display: block;
width: 100%;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
}
.tile-footer {
background-color: #e3ffec;
text-align: center;
padding: 10px;
}
.tile-footer .left {
float: left;
}
.tile-footer .right {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="column-one">
<div class="abstract_tile">
<div class="tile">
<div class="capped-module primary">
<div class="wrap">
<div class="tile-top tile-draggable">
<h2>Title</h2>
</div>
<div class="tile-bottom">
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
</div>
<div class="tile-footer tile-draggable">
<div class="left">Move</div>
<div class="right">Add/Remove</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column-two"></div>
<div class="column-three"></div>