0

当拖动门户离开列时，我期待“sortout”事件触发。“sortover”事件按预期触发。我不确定这是它应该工作的方式还是 jquery UI 被破坏。

这是演示代码http://jsfiddle.net/kY7SV/6/ 将所有 portlet 拖出列，它应该会折叠。将 portlet 拖到折叠的列上，它应该会展开。

帮助表示赞赏

为 Merlyn 编辑重要的部分：

<ul id="sm" class="sm">
    <li id=list1><div style="background-color:red">1</div>
        <div class="column" id='col1'>
            <div class="portlet">
                <div class="portlet-header">Feeds</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">News</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
    <li id=list2><div style="background-color:yellow">2</div>
        <div class="column" id='col2'>
            <div class="portlet">
                <div class="portlet-header">Shopping</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">Messages</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
    <li id=list3><div style="background-color:blue">3</div>
        <div class="column" id='col3'>
            <div class="portlet">
                <div class="portlet-header">Links</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">iMAGES</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
</ul>
​
$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();

    $(".column").bind("sortremove", function(event, ui) {
        var listitem = $(this).parents('li');
        var cnt = $(this).children().length;
        if (cnt < 1) {
            $(listitem).css('maxWidth', '25px');
        }
    });

    $(".column").bind("sortover", function(event, ui) {
        var listitem = $(this).parents('li');
        $(listitem).css('maxWidth', '');
    });

    $(".column").bind("sortout", function(event, ui) {
        var listitem = $(this).parents('li');
        var cnt = $(this).children().length;
        if (cnt < 1) {
            $(listitem).css('maxWidth', '25px');
        }
    });

    $(".column").bind("sortreceive", function(event, ui) {
        var listitem = $(this).parents('li');
        $(listitem).css('maxWidth', '');
    });

});​
4

1 回答 1

0

问题

问题是您选择了错误的项目。li总是包含两个孩子： text和divcontainer div。它不直接包含您的项目。

ui.sender不过，似乎直接给出了来源li。您可以调用$(ui.sender).children().count以获取要拖出的列的计数。

在进行拖动时，事件期间的子计数out将始终为或更多，并且仅当触发触发时计数才会为。这可能与事件触发的时间有关，或者在拖动时它可能会留下某种占位符元素。10

建议的解决方案

我建议重新考虑演示，至少在out事件方面。确定您何时仍在拖动以及何时从该事件内部完成拖动是一个棘手的逻辑。out在你拖动东西时留下一个大的放置目标也是一个很好的 UI 设计。

和事件有更明显的计数remove。receive我会坚持调整这些事件的大小。

我是怎么想出来的

我打开了我的 javascript 控制台（浏览器中的 F12），并在out事件中插入了一个控制台写入语句。在 chrome 上，这是console.out(...item to log here...). 我玩弄了各种可用的对象（this、event、ui），并检查了outerHTML它们的各种 HTML 元素属性。

一旦你弄清楚如何选择正确的元素，找出问题的计数部分的简单方法是用当前子计数更新元素的文本。然后你会看到它按列实时更新。我正在登录，并注意到它永久卡在2，这使我了解到选择了错误的元素这一事实。

笔记

我无法弄清楚所有属性this应该是什么，并且它们似乎随着时间而变化。 该文档没有太大帮助。如果我对 JavaScript 事件（一般而言）有更多了解，这可能有助于我弄清楚:)

于 2012-04-26T04:52:32.193 回答