0

I want to add some class to each clone of 'mydraggable' when it is dropped inside the sortable. But I am not sure of how to acheive this. I also wants to make the dropped clone of mydraggable as sortable so that if I drop something inside of the newly cloned inside droppable It should function same as parent sortable.

Following is my HTML

<div id="mydraggable"  >I am First<span class="myhandler">DRAG<span></div>
<div id ="sortable" class="mysortable" contenteditable="true"></div>

Following is my JS

  <script>


   $('#mydraggable').draggable({
   connectToSortable: ".mysortable",
  helper: "clone",
  revert:"invalid",
   });

 $( ".mysortable" ).sortable({ 
    placeholder: "highlight_me",
    cursor: "move",
    handle: ".myhandler",
    revert: true,
    receive:function(event , ui){
        alert($(this).html());
        //$(this).addClass('ui-sortable');
    }
});

Shivek Parmar
  • 2,865
  • 2
  • 33
  • 42

2 Answers2

0

You need to use:

$(ui.item).addClass("ui-sortable");

Complete Code:

$( ".mysortable" ).sortable({ 
 placeholder: "highlight_me",
 cursor: "move",
 handle: ".myhandler",
 revert: true,
 receive:function(event , ui){
    $(ui.item).addClass("ui-sortable");
}});
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
  • Thanks for your solution but the newly made div in sortable is not functioning like original.. I want that even the newly made div in sortable should act same as that of parent. – Shivek Parmar Aug 11 '14 at 07:38
  • @ShivekParmar: what do you mean should act same. If its about same events of that of parents then you need to bind the events after receive. – Milind Anantwar Aug 11 '14 at 07:39
  • i want the dropped element to be able to accept clones that are dropped in it.. If you can demo fiddle option then it would be great. – Shivek Parmar Aug 11 '14 at 08:07
  • Here is my fiddle [FIDDLE](http://jsfiddle.net/shivek/gbkwzhxa/). I want it in such a way that when it is dropped then it should also be able to accept like its parent. – Shivek Parmar Aug 11 '14 at 08:15
  • The class is added to the original draggable but I want the class to be added to the draggable ONLY WHEN it is DROPPED inside the sortable. Please help me. I am stuck with this for 2 days. – Shivek Parmar Aug 11 '14 at 11:12
  • @ShivekParmar: see http://stackoverflow.com/a/13456222/1719752 to only make it work on drop. – Milind Anantwar Aug 11 '14 at 13:09
0

You can access the item being dropped using ui.item and add the class like

$(ui.item).addClass('ui-sortable');

If i understood correctly, You need to use the refresh method so that the newly added items in sortable are recognized.

Something like

$( ".mysortable" ).sortable({ 
  placeholder: "highlight_me",
  cursor: "move",
  handle: ".myhandler",
  revert: true,
  receive:function(event , ui){
    alert($(this).html());
    $(ui.item).addClass('ui-sortable');
    $(this).sortable("refresh");
 }
});

Demo

T J
  • 42,762
  • 13
  • 83
  • 138
  • I have checked the element with inspect element of browser but the class is not added.Please provide demo on fiddle. – Shivek Parmar Aug 11 '14 at 08:12
  • @ShivekParmar looks like it isn't working for the first time if you're listening to receive. You can use `update` instead like [this](http://jsfiddle.net/tilwinjoy/ng1rzj7x/) (*receive is called before update, ui might not have finished something, still not sure why it doesn't work for the first time alone...*) – T J Aug 11 '14 at 08:43
  • thanks for reply and fiddle but can we do that after dropping new element, the new element is able to accept other elements. – Shivek Parmar Aug 11 '14 at 08:49
  • @ShivekParmar the draggable in your question only contains some text. How do you drag something in-between text..? Please update the question properly... – T J Aug 11 '14 at 09:22
  • Here is the website for live example what I want. But I don't know how to achieve it.. [Layoutit](http://www.layoutit.com/build?r=77343403). See when we are Dropping any new column elements then they are capable of accepting new elements like its parent. – Shivek Parmar Aug 11 '14 at 09:28