Initalize D&D on a list of items

[sitefinitysteve]

Ok so take your demo D&D page with the yellow circle and the dropzone

No imagine you have 15 yellow circles, all droppable into the same single container

When we wire it up here in document .ready we're doing this

$(".list-item").each(function(){

   $(this).kendoDraggable({

      group: "ihopethisworks"

   });

});

...

So that "works"...in that drag\drop works...but when we start to drag it literally grabs EVERY item in the list and attaches them all in some sort of weird Katamari ball.

I THINK I need to initialize it with the group property?

**EDIT** Got it working, please though a demo of this would be awesome (for reference)

Steve

[sitefinitysteve]

Also a demo of a list of items draggable to another list of droptargets (demo) please :)

We have it working, but I think it's a BIT hacky...did a lot of firebug object inspecting to get it "working"...I think there's prob a more elegant solution.

Steve

[Alex Gyoshev]

Hello Steve,

You are looking for the filter argument of the kendoDraggable() plug-in:

<ul id="draggable">
   <li>Apple</li>
   <li>Banana</li>
</ul>

$("#draggable").kendoDraggable({
    filter: "li",
    hint: function(item) { return "<div>" + $(item).text() + "</div>"; })
});

This way, you'll have only one draggable object that will handle all items in the list. (the filter is a jQuery selector, as specified in the documentation)

You are right that this isn't visible enough in the current examples. We'll try to deliver an example with a list soon.

Greetings,
Alex Gyoshev
the Telerik team

[Jacob]

Hi guys,

So, having this code: 

$('ul#widgets').kendoDraggable({

    filter : 'li',

    hint : function (item) {

        return $(item).clone();

    }

});

How can I enable actual re-ordering behavior of list's items, when one item is dropped between some other list items?

Thanks,

Jacob

[Jacob]

A quick update.

It almost works as intended with this code:

$('ul#widgets').kendoDropTarget({

        drop: function(e) {

            var $target = $(e.target),

                $draggable = $(e.draggable.currentTarget);

            $draggable.insertAfter($target);

        }

    }).kendoDraggable({

        filter: 'li',

        hint: function(item) {

            return $(item).clone();

        }

    });

The only problem now is that there is no 'filter' option for kendoDropTarget(). So the whole UL becomes a drop target, as well as all its children (including LIs, which is good, but also including anything inside those LIs, which is bad).

I was thinking about traversing the tree but I can't be really sure what will become the $target as it depends on where user drops the draggable content. It could be the UL or LIs or anything inside them. Any way to just tell kendoDropTarget to only accept drops on LIs (or anything inside) and then append stuff after the LI?

Jacob

[Alex Gyoshev]

Hi Jacob,

You should be able to control where the node is appended in the kendoDropTarget.drop handler -- i.e. instead of inserting the draggable after $target, just insert it after $target.closest("li") -- after the first li parent.

Greetings,
Alex Gyoshev
the Telerik team

[Nitin]

Hi,

Can you please provide me working example for the same.

Thanks in advance.

[pratik]

Hi Alex Gyoshev,

I have written below code to make LI draggable as you suggested but it is only working on downwards side and change the position.

But when i tried to drag the second LI over first LI it will not work. I have also tried to put "$target.closest("li");" as you suggested.

<script type="text/javascript">

           $(document).ready(function() {

               $('ul#widgets').kendoDropTarget({

                   drop: function(e) {

                       var $target = $(e.target);

                        

                       $draggable = $(e.draggable.currentTarget);

                       $draggable.insertAfter($target);

                       //$target.closest("li");

                   }

               }).kendoDraggable({

                   filter: 'li',

                   hint: function(item) {

                       return $(item).clone().css({background:"#CCCCFF", height:"50px", width:"200px"});

                   }

               });

           });

       </script>

<ul id="widgets">
     <li><img src="../../source/styles/Kendo/sprite-vertical.png" alt="">Test01</li>
     <li>Test02</li>
</ul>


Please suggest how can i make my LI to drag and change the its order in both (up and down) way.


Note: I want something like this http://jqueryui.com/demos/sortable/ with Kendo UI Drag and Drop.


Thanks in advance.

--
Pratiks

[pratik]

Hello Admin,

Could you please help me out for my last post?

Thanks

[Joe]

Was there ever resolution on this topic to mirror http://jqueryui.com/demos/sortable/  ??

[David]

I too am very interested in a simple yet complete example of moving item(s) from one list to another list either using Drag & drop or an explicit button click, as well as then being able to reorder the resulting list either using Drag & drop or an explicit button click 

[Atanas Korchev]

Hi,

 Currently Kendo UI provides no exact duplicate of the jQuery UI sortable plugin. You may cast your vote for this item if you want to see such widget developed in a future release of Kendo UI.

Regards,
Atanas Korchev
the Telerik team