Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts

    jquery .sortable() question

    I'm new to jquery. I am using the .sortable template to get drag and drop capability with two li lists. Each list is dragging and dropping fine within their own lists.

    My question is: can I use the .sortable() templates with these lists to drag and drop from one list to the other list? I want to drag the task_records_li list to the task_categories_li list.

    Thanks for any help...

    PHP Code:
        $("#task_categories_li").sortable({
          
    update : function ()
          {
            var 
    order = $('#task_categories_li').sortable('serialize');
            $(
    "#categoriesDiv").load("jquery_DnD_cat_click_ajax.php?"+order);
          }
        });

      $(
    "#task_records_li").sortable({
        
    update : function ()
        {
          var 
    order = $('#task_records_li').sortable('serialize');
     $(
    "#ajax_info").load("jquery_DnD_rec_click_ajax.php?"+order+"&parent_id="+parent_id);
        }
      }); 

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,455
    Thanks
    23
    Thanked 631 Times in 630 Posts
    Quote Originally Posted by frank727 View Post
    ... My question is: can I use the .sortable() templates with these lists to drag and drop from one list to the other list? ...
    You could try this yourself, you don't need to ask us or get our permission.
    If it don't work then come back and ask where your errors are , but post ALL the needed code please.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts
    I did try it myself but it wouldn't drop from one list to the other.

    I did post my .sortable() drag and drop jquery code. That's all there is to the .sortable DnD code.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,455
    Thanks
    23
    Thanked 631 Times in 630 Posts
    I did try it myself but it wouldn't drop from one list to the other.
    OK. But why did you ask if it worked. Why not just say it don't work.
    I did post my .sortable() drag and drop jquery code. That's all there is to the .sortable DnD code.
    Where are the items you are trying to drag? Where is the HTML that show where everything is?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Here is a test html file that uses .sortable with two lists. I'm trying to see if there is a way to drop one list item onto the other list. For example, drag the color 'red' onto the 'car'.

    I'm using the jquery .sortable() drag and drop method because it works automatically with li lists, however, it may not support dropping onto another list. I may have to manually write the drag and drop code to get this capability and abandon the .sortable method.

    PHP Code:
    <!doctype html>
    <
    html lang="en">
    <
    head>
      <
    meta charset="utf-8" />
      <
    title>jQuery UI Sortable - Default functionality</title>
      <
    link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <
    script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <style>
      #sortable1 { list-style-type: none; margin: 0; padding: 0; width: 20%; }
      #sortable1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable1 li span { position: absolute; margin-left: -1.3em; }

      #sortable2 { list-style-type: none; margin: 0; padding: 0; width: 20%; }
      #sortable2 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable2 li span { position: absolute; margin-left: -1.3em; }
      </style>
      <script>
      $(function() {
        $( "#sortable1" ).sortable();
        $( "#sortable1" ).disableSelection();

        $( "#sortable2" ).sortable();
        $( "#sortable2" ).disableSelection();
      });
      </script>
    </head>
    <body>
     
    <ul id="sortable1">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>car</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>bike</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>boat</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>plane</li>
    </ul>
    <P>
    -----------------------------------------------------------
    <P>
     <ul id="sortable2">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>red</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>blue</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>green</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>yellow</li>
    </ul>

    </body>
    </html> 

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,455
    Thanks
    23
    Thanked 631 Times in 630 Posts
    jquerys .sortable is used to SORT a list not move things from one list to another.
    If you just want a visual I put one at the end of this.

    Look here for moving between lists.http://technology2grab.blogspot.com/...box-using.htmlYou can make the two lists sortable.

    A visual thing (not worth much)
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Sortable - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css" />
      <style>
      #sortable1 { list-style-type: none; margin: 0; padding: 0; width: 20%; }
      #sortable1 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable1 li span { position: absolute; margin-left: -1.3em; }
      </style>
      <script>
      $(function() {
        $( "#sortable1" ).sortable();
        $( "#sortable1" ).disableSelection();
      });
      </script>
    </head>
    <body>
    <ul id="sortable1">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>car</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>bike</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>boat</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>plane</li>
    <P>
    -----------------------------------------------------------
    </P>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>red</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>blue</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>green</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>yellow</li>
    </ul>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    frank727 (07-14-2013)

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    50
    Thanks
    16
    Thanked 0 Times in 0 Posts
    (1) Your example uses one list to give the effect of dragging and dropping between two lists, but yes, that's the affect I want between two real lists.

    (2) The link shows how to move items between two lists but not using drag and drop.

    Since I want to use drag and drop, it looks like I will have to write the actual (using jquery) code to do the drag and dropping between two lists.

    Thanks...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •