更改可拖動元素時，可拖動元素的工具提示值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更新。我希望它有幫助。祝一切順利。