SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery drag'n'drop with CSS styles

    Hi,

    I'm using jquery to create a drag and drop application where a user can add various items to a table cell. It works fine with the basic code below:

    Code:
    <div id="droppable-accept-function" class="droppable"></div>
    
    <div class="draggable breakfast"><span class="sweet">White toast/roll</span></div>
    <div class="draggable breakfast"><span class="carb">Wholemeal toast/roll</span></div>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    
    	$('.draggable').draggable({
    		helper: 'clone'
    	});
    
    	$('#droppable-accept-function')
    		.droppable({
    			accept: function(draggable) {
    				return $(draggable).is('.breakfast');
    			},
    			activeClass: 'droppable-active',
    			hoverClass: 'droppable-hover',
    			drop: function(ev, ui) {
    				$(this).append($(document.createElement('div')).text($(ui.draggable.element).text()));
    			}
    		});		
    });
    </script>
    However, as well as appending the textual copy to the droppable element, it also needs to preseve their CSS class.

    Can anyone see how to do this?

    Thanks for any help folks...

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorted

    Code:
    <div id="droppable-accept-function" class="droppable"></div>
    
    <div class="draggable breakfast"><span class="sweet">White toast/roll</span></div>
    <div class="draggable breakfast"><span class="carb">Wholemeal toast/roll</span></div>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    
    	$('.draggable').draggable({
    		helper: 'clone'
    	});
    
    	$('#droppable-accept-function')
    		.droppable({
    			accept: function(draggable) {
    				return $(draggable).is('.breakfast');
    			},
    			activeClass: 'droppable-active',
    			hoverClass: 'droppable-hover',
    			drop: function(ev, ui) {
    				$(this).append($(document.createElement('div')).html($(ui.draggable.element).html()));
    			}
    		});		
    });
    </script>


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
  •