This is a migrated thread and some comments may be shown as answers.

Initalize D&D on a list of items

11 Answers 331 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
sitefinitysteve
Top achievements
Rank 2
Veteran
sitefinitysteve asked on 21 Oct 2011, 03:30 PM
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

11 Answers, 1 is accepted

Sort by
0
sitefinitysteve
Top achievements
Rank 2
Veteran
answered on 21 Oct 2011, 08:29 PM
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
0
Alex Gyoshev
Telerik team
answered on 27 Oct 2011, 01:56 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 1
answered on 18 Nov 2011, 09:27 AM
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
0
Jacob
Top achievements
Rank 1
answered on 18 Nov 2011, 09:53 AM
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
0
Alex Gyoshev
Telerik team
answered on 22 Nov 2011, 10:15 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nitin
Top achievements
Rank 1
answered on 29 Dec 2011, 10:02 AM
Hi,

Can you please provide me working example for the same.

Thanks in advance.
0
pratik
Top achievements
Rank 1
answered on 30 Dec 2011, 05:35 AM
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
0
pratik
Top achievements
Rank 1
answered on 03 Jan 2012, 05:02 AM
Hello Admin,

Could you please help me out for my last post?

Thanks
0
Joe
Top achievements
Rank 1
answered on 28 Aug 2012, 07:32 PM
Was there ever resolution on this topic to mirror http://jqueryui.com/demos/sortable/  ??
0
David
Top achievements
Rank 1
answered on 07 Jan 2013, 06:56 PM
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 
0
Atanas Korchev
Telerik team
answered on 08 Jan 2013, 08:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Drag and Drop
Asked by
sitefinitysteve
Top achievements
Rank 2
Veteran
Answers by
sitefinitysteve
Top achievements
Rank 2
Veteran
Alex Gyoshev
Telerik team
Jacob
Top achievements
Rank 1
Nitin
Top achievements
Rank 1
pratik
Top achievements
Rank 1
Joe
Top achievements
Rank 1
David
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or