Initalize D&D on a list of items

12 posts, 0 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 21 Oct 2011 Link to this post

    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
  2. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 21 Oct 2011 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 27 Oct 2011 Link to this post

    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!
  5. Jacob
    Jacob avatar
    23 posts
    Member since:
    Oct 2011

    Posted 18 Nov 2011 Link to this post

    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
  6. Jacob
    Jacob avatar
    23 posts
    Member since:
    Oct 2011

    Posted 18 Nov 2011 Link to this post

    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
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 22 Nov 2011 Link to this post

    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!
  8. Nitin
    Nitin avatar
    4 posts
    Member since:
    Nov 2011

    Posted 29 Dec 2011 Link to this post

    Hi,

    Can you please provide me working example for the same.

    Thanks in advance.
  9. pratik
    pratik avatar
    12 posts
    Member since:
    Nov 2011

    Posted 29 Dec 2011 Link to this post

    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
  10. pratik
    pratik avatar
    12 posts
    Member since:
    Nov 2011

    Posted 02 Jan 2012 Link to this post

    Hello Admin,

    Could you please help me out for my last post?

    Thanks
  11. Joe
    Joe avatar
    1 posts
    Member since:
    Jul 2011

    Posted 28 Aug 2012 Link to this post

    Was there ever resolution on this topic to mirror http://jqueryui.com/demos/sortable/  ??
  12. David
    David avatar
    1 posts
    Member since:
    Sep 2012

    Posted 07 Jan 2013 Link to this post

    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 
  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 Jan 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready