0

我有用于拖放的 li 列表。我的 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”。当我移至“收件箱”等项目时，“已发送”工具提示显示为“移至收件箱”、“移至已发送”。但是当我再次超过子文件夹时。我不想显示“移至”文本。而不是我想只显示文件夹名称“子文件夹 1”。

问题：

  1. 当我开始拖动时，不显示可拖动的助手克隆。
  2. 当我在“子文件夹 1”上方时，目标文件夹文本将被视为“已删除以及子文件夹 1”，因此 event.target 仅在我位于“子文件夹 1”上方时将文件夹名称显示为“已删除” .

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

4

2 回答 2

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+$/, '');
    }

检查这个小提琴更新。我希望它有所帮助。一切顺利。

于 2013-10-11T06:27:23.407 回答
0

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

因此，我没有在“A”锚标签上初始化可拖动和可放置，而不是 li。它工作正常。

  $('.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/。

于 2013-10-22T05:28:36.937 回答