SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Florida
    Posts
    58
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Jquery: Drag - Drop and then get the new order based on the new position

    Hello,
    Ok I have the drag and drop thing working, and its doing what I expected it to. My question is after I move the box can I get the div id values based on the new order?
    IE: If I drag a box to the top from the bottom, I want to get and store the new postion based on an array of div id's


    <script type="text/javascript">
    $(function(){
    $(".box").draggable();
    });
    </script>
    <div id="main">
    <div class="box" id=box_1></div>
    <div class="box" id=box_2></div>
    <div class="box" id=box_5></div>
    <div class="box" id=box_6></div>
    <div class="box" id=box_3></div>
    <div class="box" id=box_4></div>
    </div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JamesKenny View Post
    Hello,
    Ok I have the drag and drop thing working, and its doing what I expected it to. My question is after I move the box can I get the div id values based on the new order?
    IE: If I drag a box to the top from the bottom, I want to get and store the new postion based on an array of div id's
    Draggable doesn't change their ordering in the DOM tree, it just gives them a relative position instead, so it's difficult to programmatically determine their relationship to each other.
    You would want to also make use of droppable so that when they are dropped, you can more easily get their updated relationships with each other.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Florida
    Posts
    58
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well I went with sortable which works how I was hoping.

    Code:
    	$("#main").sortable({
    		opacity: 0.6,
    		update: function(event, ui) {
    		    var info = $(this).sortable("serialize");
    		    alert(info);
    		}
    	});
        $( "#main" ).disableSelection();
    The problem is that I am building a widget type system, the widgets are variable widths and heights.

    The dimensions are fixed sort of based on css classes ie:
    .cols_1{width:200px;}
    .cols_2{width:400px}

    .rows_1{height:100px;}
    .rows_2{height:200px}

    I am sure you know actually sortng and aligning something like this is a pain in the butt if not impossible, any suggestions as to how I can fill in the blanks? I need to store the postion in a databse so the next time a user logs in it will be the same

    widgets_align_sample.jpg

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JamesKenny View Post
    I need to store the postion in a databse so the next time a user logs in it will be the same
    When a sortable item is dropped, the DOM updates with the new position of the items. So if each item is uniquely identified, you can use something like this to retrieve the id's

    Code javascript:
    $('selector for items').toArray().map(function (el) {
        return el.id;
    });

    That will give you an array of id attributes that you can then use JSON.stringify() on and pass that info to the database.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Florida
    Posts
    58
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was using this function to get the array
    var info = $(this).sortable("serialize");

    but did you look at the image? I cant figure out how to get the divs to align next to each other. The box's are dynamic based on user choice and the sizes are dynamic based on user choice. In the omage I am trying to get the blue and yellow box to float up to atleast the the bottom of the boxes above them

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JamesKenny View Post
    I was using this function to get the array
    var info = $(this).sortable("serialize");

    but did you look at the image? I cant figure out how to get the divs to align next to each other. The box's are dynamic based on user choice and the sizes are dynamic based on user choice. In the omage I am trying to get the blue and yellow box to float up to atleast the the bottom of the boxes above them
    That sounds like a job for CSS, and potentially for advice from the css forum
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Location
    Florida
    Posts
    58
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was worried you would say that, I already started gathering the relative position after switching back to draggable


Tags for this Thread

Bookmarks

Posting Permissions

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