List inside of another list

May 26, 2010 at 8:01 PM

I have one sortable list, that contains elements that contain their own sortable lists.  When I sort the outer list, the inner lists dissapear.  Any ideas on how to fix?

Coordinator
May 28, 2010 at 11:28 AM

This post may help explain the cause:
http://dragsort.codeplex.com/Thread/View.aspx?ThreadId=76046

Otherwise if you can provide me an example, that would help me know what's going on.

May 28, 2010 at 2:52 PM

This is how I initialize the parent list.  There are two parent lists where the user can drag between.

	$("#categories, #categoriesOff").dragsort({
		dragSelector: ".catHandle",
		dragEnd: categorySave,
		dragBetween: true,
		placeHolderTemplate: "<li class='feedCategoryContainer'><div></div></li>"
	});

And the child lists:

  $("#categoryFeedHolder" + categoryId).dragsort({
    dragSelector: ".feedHandle",
    dragEnd: saveFeedOrder,
    dragBetween: false,
    placeHolderTemplate: "<li class='feedContainer'><div class='feed'></div></li>"
  });

 

<ul id="categories" class="categories">
  <li class="feedCategoryContainer" categoryId="1780" id="category1780" toggleState="Down">
      <div class="feedCategory">
       <div class="" id="categoryNameInput1780" style="display: none">

         <span class="categoryTitleInput"><div class="fleft"><input name="data[Category][name]" type="text" id="CategoryName1780" value="Traffic" class="appinput" maxlength="100" /></div></span>
         <span class="categoryTitleSave" onclick="saveCategoryName('1780');"><img src="/img/images/management/images/save.png" alt="" /></span>
         <span class="categoryTitleCancel" onclick="cancelCategoryName('1780');"><img src="/img/images/cancel.jpg" alt="" /></span>
         <span class="categoryTitleDelete" onclick="deleteCategory('1780', 'Traffic', '9');"><img src="/img/images/management/images/delete.png" alt="" /></span>
       </div>
       <div class="catTitle" id="categoryName1780">
            <a href="javascript: toggleCategory('1780');">
              <span class="feedCatArrow"><img src="/img/images/management/images/feedcatUp.png" id="feedCatArrow1780" alt="" /></span>
              <span class="catName" id="catName1780">Traffic</span>

            </a>
            <span class="feedCount">(9 Feeds)</span>
            <span class="catHandle"><img src="/img/move_icon.png" alt="" /></span>
            <span class="editCategory" onclick="editCategoryName('1780');"><img src="/img/images/management/images/editupFEED.png" alt="" /></span>
       </div>
       <div class="categoryFeeds" id="categoryFeeds1780" style="display: none;">
	<div id="appHeader">
	  <div class="lcorner"></div>

	  <div class="bg">
	    <div class="fright addFeed"><span class="button" onclick="addFeed('1780');"><img src="/img/images/management/images/addsubsectionFEED.png" alt="" /></span></div>
	  </div>
	  <div class="rcorner"></div>
	</div>
	
	<div class="clear"></div>
	
	<div class="fleft">
	  <div class="feedsHeader">
	    <div class="fleft feedTitleHeader">Title</div>

	    <div class="fleft feedRSSFeedHeader">RSS Feed</div>
	    <div class="fleft feedTypeHeader">Type</div>
	    <div class="fleft feedStatusHeader">Status</div>
	  </div>
	
	  <div class="clear"></div>
	  
	  <ul class="feedHolder" id="categoryFeedHolder1780" categoryId="1780">
		        <div class="feedEdit" id="feedInputNew1780" style="display: none">

                <input type="hidden" name="data[Feed][feed_category_id]" id="FeedCategoryIdNew1780" value="1780" />        <div class="fleft"><input name="data[Feed][name]" type="text" id="FeedNameNew1780" value="" class="feedinput feedInputTitle" maxlength="100" /></div>        <div class="fleft"><input name="data[Feed][path]" type="text" id="FeedPathNew1780" value="" class="feedinput feedInputRssFeed" maxlength="500" /></div>        <select name="data[Feed][feed_type]" id="FeedTypeNew1780" div="fleft" label="" class="feedinput feedInputType">
<option value="1" selected="selected">Article</option>
<option value="3">Animation</option>
<option value="4">Image</option>
<option value="5">Slideshow</option>
<option value="6">Forecast</option>
<option value="7">Weather Conditions</option>

<option value="8">Weather Alerts</option>
<option value="9">About</option>
<option value="10">Traffic</option>
<option value="11">Audio Stream</option>
<option value="14">Single Item</option>
<option value="15">Load URL</option>
<option value="16">Google Traffic</option>
</select>        <select name="data[Feed][status]" id="FeedStatusNew1780" div="fleft" label="" class="feedinput feedInputStatus">
<option value="0">Off</option>

<option value="1" selected="selected">On</option>
</select>        
        <div class="clear"></div>
        
        <div class="feedInputSecond">
          <div class="feedDays fleft">
            &nbsp;
          </div>
          <div class="feedButtons fleft" id="feedButtonsNew1780">
           <div class="button feedButton" onclick="saveFeed('New1780', 'add');"><img src="/img/images/management/images/save.png" alt="" /></div>
           <div class="button feedButton" onclick="cancelFeed('New1780', 'add');"><img src="/img/images/cancel.jpg" alt="" /></div>

                     </div>
        </div>
        
      </div>
		  		         <li class="feedContainer" id="feedHolder4537" feedId="4537">
        <div class="feed" id="feed4537">
          <div class="fleft feedCheckbox"><input type="checkbox" id="feedCheckbox4537" onclick="editFeed('4537');" /></div>
          <div class="fleft feedTitle" id="feedTitle4537" feedName="Test">Test</div>
          <div class="fleft feedRssFeed" id="feedRSSFeed4537" feedPath="">&nbsp;</div>

          <div class="fleft feedType" id="feedType4537" feedTypeId="7">Weather Conditions</div>
          <div class="fleft feedStatus" id="feedStatus4537" feedStatusId="1">On</div>
          <div class="feedHandle fright"><img src="/img/move_icon.png" alt="" /></div>
        </div>
        <div class="clear"></div>
        
              <div class="feedEdit" id="feedInput4537" style="display: none">
                  <input type="hidden" name="data[Feed][id]" id="FeedId4537" value="4537" />                <input type="hidden" name="data[Feed][feed_category_id]" id="FeedCategoryId4537" value="1780" />        <div class="fleft"><input name="data[Feed][name]" type="text" id="FeedName4537" value="Test" class="feedinput feedInputTitle" maxlength="100" /></div>        <div class="fleft"><input name="data[Feed][path]" type="text" id="FeedPath4537" value="" class="feedinput feedInputRssFeed" maxlength="500" /></div>        <select name="data[Feed][feed_type]" id="FeedType4537" div="fleft" label="" class="feedinput feedInputType">

<option value="1">Article</option>
<option value="3">Animation</option>
<option value="4">Image</option>
<option value="5">Slideshow</option>
<option value="6">Forecast</option>
<option value="7" selected="selected">Weather Conditions</option>
<option value="8">Weather Alerts</option>
<option value="9">About</option>
<option value="10">Traffic</option>

<option value="11">Audio Stream</option>
<option value="14">Single Item</option>
<option value="15">Load URL</option>
<option value="16">Google Traffic</option>
</select>        <select name="data[Feed][status]" id="FeedStatus4537" div="fleft" label="" class="feedinput feedInputStatus">
<option value="0">Off</option>
<option value="1" selected="selected">On</option>
</select>        
        <div class="clear"></div>
        
        <div class="feedInputSecond">

          <div class="feedDays fleft">
            &nbsp;
          </div>
          <div class="feedButtons fleft" id="feedButtons4537">
           <div class="button feedButton" onclick="saveFeed('4537', 'edit');"><img src="/img/images/management/images/save.png" alt="" /></div>
           <div class="button feedButton" onclick="cancelFeed('4537', 'edit');"><img src="/img/images/cancel.jpg" alt="" /></div>
                      <div class="button feedButton" onclick="deleteFeed('4537', 'Test');"><img src="/img/images/management/images/delete.png" alt="" /></div>
                     </div>
        </div>

        
      </div>
      </li>
		  		  		         <li class="feedContainer" id="feedHolder4545" feedId="4545">
        <div class="feed" id="feed4545">
          <div class="fleft feedCheckbox"><input type="checkbox" id="feedCheckbox4545" onclick="editFeed('4545');" /></div>
          <div class="fleft feedTitle" id="feedTitle4545" feedName="sdf">sdf</div>
          <div class="fleft feedRssFeed" id="feedRSSFeed4545" feedPath="">&nbsp;</div>
          <div class="fleft feedType" id="feedType4545" feedTypeId="8">Weather Alerts</div>

          <div class="fleft feedStatus" id="feedStatus4545" feedStatusId="1">On</div>
          <div class="feedHandle fright"><img src="/img/move_icon.png" alt="" /></div>
        </div>
        <div class="clear"></div>
        
              <div class="feedEdit" id="feedInput4545" style="display: none">
                  <input type="hidden" name="data[Feed][id]" id="FeedId4545" value="4545" />                <input type="hidden" name="data[Feed][feed_category_id]" id="FeedCategoryId4545" value="1780" />        <div class="fleft"><input name="data[Feed][name]" type="text" id="FeedName4545" value="sdf" class="feedinput feedInputTitle" maxlength="100" /></div>        <div class="fleft"><input name="data[Feed][path]" type="text" id="FeedPath4545" value="" class="feedinput feedInputRssFeed" maxlength="500" /></div>        <select name="data[Feed][feed_type]" id="FeedType4545" div="fleft" label="" class="feedinput feedInputType">

<option value="1">Article</option>
<option value="3">Animation</option>
<option value="4">Image</option>
<option value="5">Slideshow</option>
<option value="6">Forecast</option>
<option value="7">Weather Conditions</option>
<option value="8" selected="selected">Weather Alerts</option>
<option value="9">About</option>
<option value="10">Traffic</option>

<option value="11">Audio Stream</option>
<option value="14">Single Item</option>
<option value="15">Load URL</option>
<option value="16">Google Traffic</option>
</select>        <select name="data[Feed][status]" id="FeedStatus4545" div="fleft" label="" class="feedinput feedInputStatus">
<option value="0">Off</option>
<option value="1" selected="selected">On</option>
</select>        
        <div class="clear"></div>
        
        <div class="feedInputSecond">

          <div class="feedDays fleft">
            &nbsp;
          </div>
          <div class="feedButtons fleft" id="feedButtons4545">
           <div class="button feedButton" onclick="saveFeed('4545', 'edit');"><img src="/img/images/management/images/save.png" alt="" /></div>
           <div class="button feedButton" onclick="cancelFeed('4545', 'edit');"><img src="/img/images/cancel.jpg" alt="" /></div>
                      <div class="button feedButton" onclick="deleteFeed('4545', 'sdf');"><img src="/img/images/management/images/delete.png" alt="" /></div>
                     </div>
        </div>

        
      </div>
      </li>
 
	  </ul>
	</div>
</div>
 
      </div>
    </li>

 

 

May 28, 2010 at 3:05 PM

Here are a couple of images detailing what I'm seeing

 

This is before I drag a parent:

http://doapps.com/screenshots/dragsort_1.png

 

And this is what happens after I drag a parent, all the child lists are gone

http://doapps.com/screenshots/dragsort_2.png

Jun 2, 2010 at 3:55 AM

mcm_ham, have you had a chance to look at my code?

Coordinator
Jun 4, 2010 at 6:17 AM

Ah sorry for the delay, I've been living a busy life at the moment but should have time to look at this properly this weekend. I did take a quick 5 min try of your code on my machine but couldn't reproduce so was going to look a bit more carefully when I had some more time for possible css issues.

Coordinator
Jun 5, 2010 at 9:48 AM

Actually do you want to email me the html page complete with images and css by saving it from within your browser and email me at "mcm DOT ham AT gmail DOT com". Here's what I am playing with so far where I'm not able to replicate your issue:

http://mcmblog.sitesled.com/misc/test.html