CODEWITHSUNDEEP
jqueryjquery-ui
Cindrella
Cindrella

Reputation: 1721

Change the tooltip value of draggable element when over droppable elements jquery

I have list of li's Which I am using for drag and drop. My li's are in format of:

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

Below is the code for draggable initialization:

$('#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);
    }
});

Suppose i have started drag for "Sub Folder 1". When i move to items like "Inbox", "Sent" tooltip is showing as Move to Inbox, Move to Sent. But when i am over the subfolder again. i dont' want o show the "Move to " text. Instead of that i want to show only folderName "Sub Folder 1".

Issues:

  1. When i start the drag, draggable helper clone is not shown.
  2. When i am over the "Sub folder 1" the target folder text is taking as "deleted and also sub folder 1" so the event.target is showing the folder Name as "Deleted" only when i am over the "sub folder 1".

How to fix this issue. Fiddle: http://jsfiddle.net/3QMzh/3/

Upvotes: 0

Views: 2717

Answers (2)

Cindrella
Cindrella

Reputation: 1721

Jquery UI droppable doesn't support parent child droppable zones as per http://bugs.jqueryui.com/ticket/9608.

so instead of li I have initialized the draggable and droppable on "A" anchor tags. It is working fine.

  $('.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);
}
});

Here is the fiddle: http://jsfiddle.net/3QMzh/50/.

Upvotes: 0

super
super

Reputation: 2328

I don't think this is the best solution it works for your given tree structure.

Here is the code:

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

Check this Fiddle update. I hope it helps. All the best.

Upvotes: 1

Related Questions