如何调试jQuery嵌套的可排序的可拖动元素? [英] How to debug a jQuery nested sortable draggable element?
问题描述
第一部分允许您先将元素拖入可排序的div,这样可以正常工作。然后我想要让这个div变得可排序,所以我可以将新的元素(部分)拖入那些。
The first part allows you to first drag an element into a sortable div, which is working fine. I then want to have that div become sortable as well so I can drag new elements (parts) into those.
该部分也可以正常工作,除非有时候重新排序元素(较暗的)不会让您将其中的一部分重新放入,直到您再次重新排序,或者尝试将其放在其他元素之一并返回。
That part works fine too, except sometimes if you reorder the elements (the darker ones) it wont let you put a part back into it until you either reorder them again, or try and put it in one of the other elements and go back to it.
这很难解释,但是这是一个屏幕截图: http://screencast.com / t / Ls2ksVY4Q
It's kind of hard to explain, but here's a screen-cast: http://screencast.com/t/Ls2ksVY4Q
演示如下: http://jsfiddle.net/9MXWp/
以下是相关代码:
$(document).ready(function() {
$('#the-grid').sortable({
tolerance: 'pointer',
update: function(event, ui) {
if( $(ui.item).has('.close').length == 0 ) {
$(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
}
$('.part-holder', ui.item).sortable({
tolerance: 'pointer',
update: function(event, ui) {
if( $(ui.item).has('.close').length == 0 )
$(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
}
});
}
});
$('#sidebar > ul > li.part').draggable({
helper: 'clone',
connectToSortable: '.part-holder',
addClasses: false
});
$('.drag-element').draggable({
revert: 'invalid',
helper: 'clone',
connectToSortable: '#the-grid',
addClasses: false
});
$('#update-list').click(updateList);
});
似乎重复问题的配方(在FF
Recipe that seems to duplicate the problem (in FF 3.6):
-
将元素1 拖放到暂存区域。
将元素2 拖放到暂存区域;将它放在元素1之前。
Drag Element 2 to the staging area; place it before element 1.
在元素1 内部拖动部分。 ☞有时页面会在这里失败。 ☜☣
Drag a Part inside Element 1. ☞ Sometimes the page will fail right here. ☜ ☣
在元素2 之间拖动部分。
现在将元素2 拖入元素1 之后。
☞在元素1 中拖动部分;它不行。 ☜☣
☞ Drag a Part inside Element 1; it won't work. ☜ ☣
在元素2 之间拖动部分它将工作,现在元素1 再次接受零件。
Drag a Part inside Element 2; it will work, and now Element 1 accepts parts again.
推荐答案
好吧,再试一次;我添加了一个'connectWith'选项,然后包装了'.part-holder'可排序的初始化程序,因此每次重新排序网格时都不会更新...
ok lets try this again; i added a 'connectWith' option, then wrapped the '.part-holder' sortable initializer so it doesn't get updated every time the grid is re-ordered...
$(document).ready
(
function()
{
$('#the-grid').sortable
( {
tolerance: 'pointer',
update: function (event, ui)
{
if( $(ui.item).has('.close').length == 0 )
{
$(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x<\/a>');
}
if($(ui.item).has('.part-holder.ui-sortable').length == 0)
{
$('.part-holder', ui.item).sortable({
tolerance: 'pointer',
connectWith: '.part-holder',
update: function(event, ui) {
if( $(ui.item).has('.close').length == 0 )
$(ui.item).prepend('<a href="#" class="close" onclick="$(this).parent().remove();">x</a>');
}
});
}
else
{
// don't recreate
}
}
} );
$('#sidebar > ul > li.part').draggable
( {
helper: 'clone',
connectToSortable: '.part-holder',
addClasses: false
} );
$('.drag-element').draggable
( {
revert: 'invalid',
helper: 'clone',
connectToSortable: '#the-grid',
addClasses: false
} );
$('#update-list').click (updateList);
}
);
function updateList()
{
$('#current-list').empty();
$('#the-grid > li').each( function(index, value) {
$('#current-list').append('<li>' + $(value).html() + '<\/li>');
});
}
对于这些更改,您可以将零件添加到部分持有人!我确实看到一些间歇性的js错误...我不知道为什么它们出现,但是看起来似乎并没有干扰使用FF 3.6查看页面的操作。
with those changes, you are able to add the 'parts' to the 'part-holders'! I did see some intermittent js errors... I have no idea why they appear, but they don't seem to interfere with the operation of the page when viewed with FF 3.6
这篇关于如何调试jQuery嵌套的可排序的可拖动元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!