更改可拖动元素时，可拖动元素的工具提示值jquery

Question

我有我用于拖放的李的列表。我李时珍在格式：

<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> 

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

为“子文件1”

$('#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. 当我开始拖动，没有显示可拖动的辅助克隆。
2. 当我在“子文件夹1”目标文件夹文本正在为“删除，也分文件夹1”，因此event.target被显示为“已删除”的文件夹名称只有当我在“子文件夹1“。

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

Answer 1

jQuery UI的可弃不支持父子投掷的区域按http://bugs.jqueryui.com/ticket/9608。

所以不是李的我初始化了可拖动和器可弃的“A”锚标记。它工作正常。

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

Answer 2

我不认为这是它的工作原理为您定树结构的最佳解决方案。

下面是代码：

$(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更新。我希望它有帮助。祝一切顺利。