1

I am trying to user draggable and droppable functionality. I have so many folders and want to move folders one folder to another as in outlook.com. all folders are in the form of li elements like:

<div id="test">
  <ul>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
    <li>.....</li>
  </ul>
</div>

I have used below code to drag and drop. when doing drap and drop the li elements position is not moving instead in styles top and left are added. I want to remove the li element and to add at target elements where droped.

     $('#test ul li').draggable({
      cursor: 'move'          
    });
    $('#test ul li').droppable({});

Below is the image from outlook.com. Folder Structure will be like below:

enter image description here

I dont' want to move inbox,archieve, sent, deleted folders. but want to move the folder under those item. Like "sdfsdf" folder from Deleted to Sent.

How this can be achieved.

Cindrella
  • 1,671
  • 7
  • 27
  • 47
  • Check out this lnk : http://stackoverflow.com/questions/1324044/how-to-disable-jquery-ui-draggable – Krish Oct 03 '13 at 10:09

3 Answers3

0

Use the "disable" method to disable a particular element's drag option

$( ".selector" ).draggable( "disable" );
Krish
  • 2,590
  • 8
  • 42
  • 62
0

This JSFiddle should be what you are looking for. It implements a very basic drag drop functionality that does not include the top level list items.

It uses the below code : 

$(document).ready(function() {
    $('#test ul li ul li').draggable({
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: 'move'          
    });
    $("#test ul li ul").droppable({
      hoverClass: "droppable-hover",
      activeClass: "ui-state-highlight",
      drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.appendTo($(this));
      }
    });
});

This code makes all sub items draggable and all sub lists droppable, but it ignores the initial level items. When you drag an item to a new UL it will append the item to that list which will remove it from the previous list.

Nunners
  • 3,047
  • 13
  • 17
0

You can just filter out the element you not want.

For example:

// select only sub list
$('#test ul li li').draggable();
$('#test ul li li').dropable();
Chokchai
  • 1,684
  • 12
  • 12