防止项目在其他(父/子)元素中“可放置"
[英] Prevent items to be 'droppable' in other (parent/child) elements
本文介绍了防止项目在其他(父/子)元素中“可放置"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用knockout-sortable.js 让用户拖放项目给它们一个不同的顺序,但是当我的页面上有多个放置区域"时我遇到了问题.我有嵌套集,所有这些都是可排序的,但不可可互换.
我的代码:
<tr><td>Blabla</td></tr>
在其他时候:
<tr><td>另一个blabla</td></tr>
我现在可以将Another blabla"拖放到Blabla"中,从而导致错误.我怎样才能防止这种情况发生?
解决方案
有几种方法可以解决这个问题.第一种是将 connectClass 作为 false 或 null(或任何表示为布尔值时等于 false 的值)传递给可淘汰排序的 connectClass:
<div class="sortable" data-bind="sortable: { data: blueprint.pages, connectClass: false }"><tr><td>Blabla</td></tr>
<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, connectClass: false }"><tr><td>另一个blabla</td></tr>
您还可以将包含选项传递给 jQuery:
<div class="sortable" data-bind="sortable: { data: blueprint.pages, options: { contains: 'parent' } }"><tr><td>Blabla</td></tr>
<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, options: { contains: 'parent' } }"><tr><td>另一个blabla</td></tr>
与第一个解决方案不同,这将阻止项目从视觉上离开盒子(如果这是您的愿望).
I use knockout-sortable.js to let the user drag and drop items to give them a different order, but I'm experiencing problems when I have multiple 'drop zones' on my page. I have nested sets, all of which are sortable, but not interchangeable.
My code:
<div class="sortable" data-bind="sortable: blueprint.pages">
<tr><td>Blabla</td></tr>
</div>
And at some other point:
<div class="sortable" data-bind="sortable: selectedPage().page_sections">
<tr><td>Another blabla</td></tr>
</div>
I can now just drag and drop 'Another blabla' into 'Blabla', causing errors. How can I prevent this from happening?
解决方案
There are a couple ways to go about this. The first is to pass in to knockout-sortable the connectClass as false or null (or anything that is equal to false when expressed as a boolean):
<div class="sortable" data-bind="sortable: { data: blueprint.pages, connectClass: false }">
<tr><td>Blabla</td></tr>
</div>
<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, connectClass: false }">
<tr><td>Another blabla</td></tr>
</div>
You can also pass, into jQuery, the containment option:
<div class="sortable" data-bind="sortable: { data: blueprint.pages, options: { containment: 'parent' } }">
<tr><td>Blabla</td></tr>
</div>
<div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, options: { containment: 'parent' } }">
<tr><td>Another blabla</td></tr>
</div>
This, unlike the first solution, will stop the item from visually leaving the box (if that's your desire).
这篇关于防止项目在其他(父/子)元素中“可放置"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!