Question

我有li的列表，我用它来拖放。我的格式是：

<div id="test" class="list">
    <ul>
        <li>Inbox
            <ul></ul>
        </li>
        <li>Sent
            <ul></ul>
        </li>
        <li>Archive
            <ul></ul>
        </li>
        <li>Deleted
            <ul>
                <li>Sub Folder 1</li>
            </ul>
        </li>
    </ul>
</div>

以下是可拖动初始化的代码：

$('#test li').draggable({
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: 'move'          
});

$("#test li ").droppable({
    hoverClass: "ui-state-active",
    activeClass: "ui-state-highlight",
    over: function(event, ui) {
        var folderName = $(event.target).text();
        $(ui.helper).text("Move to "+folderName);
    }
});

假设我已开始拖动“子文件夹1”。当我移动到“收件箱”之类的项目时，“已发送”工具提示显示为“移至收件箱”，“移至已发送”。但是当我再次超过子文件夹时。我不想'显示“移动到”文字。而不是我想只显示folderName“子文件夹1”。

的问题：

当我开始拖动时，不会显示可拖动的助手克隆。
当我越过“子文件夹1”时，目标文件夹文本将被视为“已删除并且还有子文件夹1”，因此只有当我越过“sub”时，event.target才会将文件夹名称显示为“已删除”文件夹1“。

如何解决此问题。小提琴：http://jsfiddle.net/3QMzh/3/

Answer 1

我认为这不是适合您的树结构的最佳解决方案。

以下是代码：

    $(document).ready(function () {
        $('#test li').draggable({
            revert: "invalid",
            containment: "document",
            helper: "clone",
            cursor: 'move',
            start: function () {
              $(this).addClass('drag-parent');
            }
        });

        $("#test li ").droppable({
            hoverClass: "ui-state-active",
            activeClass: "ui-state-highlight",
            over: function (event, ui) {

                parent = customTrimString($('.drag-parent').parents('li'));

                if (parent == null) {
                    parent = customTrimString($('.drag-parent').parents('ul'));
                }

                folderName = customTrimString($(event.target).parents('li'));

                if (folderName == "") {
                    folderName = customTrimString($(event.target));
                }                   

                $(ui.helper).text("Move to " + folderName);

            }
        });
    });

    function customTrimString(data) {
        return data.clone().children().remove().end()
                   .text().replace(/\s+$/, '');
    }

检查此 Fiddle 更新。我希望它有所帮助。一切顺利。

Answer 2

根据http://bugs.jqueryui.com/ticket/9608，Jquery UI droppable不支持父子可放置区域。

所以我没有使用li来初始化“A”锚标签上的draggable和droppable。它工作正常。

  $('.folders').draggable({
  axis: "y",
  containment: "document",
  helper: function(event){
    var showTooltip  = $('<div class="draggable-tooltip"/>').text($(this).text());
      draggableEle = $(this).text();
    return showTooltip;
   },
  cursor: 'pointer'

});

$(".folders").droppable({
over: function (event, ui) {

var folderName = $(event.target).attr('id');
var targetFolder = $(event.target).attr('id');

console.log(":::folderNmae::;"+folderName+"::target folder::"+targetFolder);
$(ui.helper).text("Move to " + folderName);
},
out: function(event,ui){
$(".draggable-tooltip").text(draggableEle);
}
});

这是小提琴：http://jsfiddle.net/3QMzh/50/。

over over droppable elements jquery时，更改draggable元素的工具提示值

2 个答案: