We help IT Professionals succeed at work.

How to get id of destination list when using connectToSortable

BrentNJ
BrentNJ asked
on
I want to disable a source list item when dragged to another list. Using the stop event works ok accept if we accidentally drop the item into itself, then it also becomes disabled.

Would like to check the target list id first, then disable the source element.

This does not work because it references the source list. How do I reference the id of the destination list?

ba is source, aa is destination

Thanks


$('.draggable').draggable({
    connectToSortable: '#aa',
    helper: 'clone',
    revert: 'invalid',
    stop: function(event, ui){
      
      if ($(this).parent().attr('id')=='bs') {
      $(this).draggable({disabled: true}).addClass('done');    
      }
    }
  })

Open in new window

Comment
Watch Question

Commented:
destination should be in ui argument?

Author

Commented:
Can you point me to the documentation on the ui argument?
Commented:
Unfortunately I could not find any documentation on the ui argument. I was able to get Javascript to spit out all of its properties. It contains several items regarding the coordinates of the drop, which *could* be used to determine whether the item was being dropped on itself, but probably should not be used in that way.

I think maybe the reason you are having difficulty is your approach. You should not test the destination in the source's stop event, you should test the destination in the destination's 'receive' event (or a similar event in the destination such as 'out').

I would recommend reading under the Events tab of this jQuery UI page:
http://jqueryui.com/demos/sortable/

Also, I may have told you wrong before about the ui argument. The actual target and source information is going to be in the event argument. Use the simple script below to see all of the properties of the event argument.

If I understood your question better I may be able to offer more detailed help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>JQuery Test</title>    
    
    <link rel="stylesheet" href="css/jquery.ui.css" />
    
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.ui.js"></script>
    <script type="text/javascript">
(function($){
  $(document).ready(function(){
    $('.sortable').sortable({
      stop : function(event, ui) {
        for (i in event)
          $('.debug').append(""+i+"\n");
        
      }
    });
    $('#list_a').sortable( "option", "connectWith", '#list_b' );
    $('#list_b').sortable( "option", "connectWith", '#list_a' );
  });
})(jQuery);
    </script>
  </head>
  <body>
  
  <ul class="sortable" id="list_a">
    <li>Sort item 1a</li>
    <li>Sort item 2a</li>
    <li>Sort item 3a</li>
  </ul>
  
  <ul class="sortable" id="list_b">
    <li>Sort item 1b</li>
    <li>Sort item 2b</li>
    <li>Sort item 3b</li>
  </ul>
  
<pre class="debug">
<h2>Debug Messages</h2>
</pre>
  
  </body>
</html>

Open in new window

Author

Commented:
Thanks.

It took a lot of trial and error.

I'll have to look for docs to explain why it works
receive: function(event, ui) {
				for (i in event)
					$('.debug').append(""+i+"\n");
		  
				alert(event.target.id);
				alert(ui.sender.parent().attr('id'));
				var src=event.target.id;
				var dest=ui.sender.parent().attr('id')
					
				if(src!=dest){
					ui.sender.draggable({disabled: true}).addClass('scored');
				}

Open in new window