Search jQuery

jQuery Forum

Jquery Drag and Drop

in Using jQuery • 11 years ago

Hi,

I have a situation here, plz help me out.

I m working on a storage management project,

Imagine a 3x3 table. I want to drag and drop a object in a cell, for eg. it should go to either (3,3) or (2,1) ..should not stay in between them and have to store the location in database of that object so that i can retrieve and show it.

Replies(2)

charlietfl

Re: Jquery Drag and Drop

11 years ago

this should get you started

http://jsfiddle.net/gErzw/

umapathym..

Re: Jquery Drag and Drop

11 years ago

Tons of Thanks Charlie,

I have tried something like this, but i will go in your way.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/custom.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/start/jquery-ui.css" />
 <style> .ui-dialog .ui-dialog-titlebar-close { display: none; } </style>
<style type="text/css"> .ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.9em; } </style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>

<script>
	$(function() {
		$( ".drag-obj" ).draggable({ revert: "invalid" });
		$( ".drop-obj" ).droppable({
		
			drop: function( event, ui ) {
				  var dropped = ui.draggable;
				  var currentobj = ui.draggable.text();
            var droppedOn = $(this);
  $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
  var currentId = $(this).attr('id');
  
  $("#content ul").append('<li>Obj ' + currentobj +  ' was dropped in ' + currentId + '</li>');

		
			}
		});
	});
	</script>

</head>

<body style="font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em;	">
<div class="container">


  



  <div class="devpage span-24">
  
    <div class="drops span-2">

    <h3>OBJECTS - To be dragged </h3>
    <ul>
            <li class="span-2 drag-obj">A</li>
            <li class="span-2 drag-obj">B</li>
            <li class="span-2 drag-obj">C</li>
            <li class=" span-2 drag-obj">D</li>

            <li class=" span-2 drag-obj">E</li>
            <li class=" span-2 drag-obj">F</li>
            <li class=" span-2 drag-obj">G</li>
            <li class=" span-2 drag-obj">H</li>
            <li class=" span-2 drag-obj">I</li>
            <li class=" span-2 drag-obj">J</li>

                       

    
    </ul>
    </div>

    <div class="rack span-10">
    <h3>RACK</h3>
    <br/>
        <br/>
    <ul>
            <li id="Row1Col1" class=" span-2 drop-obj"></li>

            <li id="Row1Col2" class=" span-2 drop-obj"></li>
            <li id="Row1Col3" class=" span-2 drop-obj"></li>
            <li id="Row1Col4" class=" span-2 drop-obj"></li>
            <li id="Row1Col5" class=" span-2 drop-obj"></li>
            
                        <li id="Row2Col1" class=" span-2 drop-obj"></li>
            <li id="Row2Col2" class=" span-2 drop-obj"></li>
            <li id="Row2Col3" class=" span-2 drop-obj"></li>
            <li id="Row2Col4" class=" span-2 drop-obj"></li>
            <li id="Row2Col5" class=" span-2 drop-obj"></li>

            
                        <li id="Row3Col1" class=" span-2 drop-obj"></li>
            <li id="Row3Col2" class=" span-2 drop-obj"></li>
            <li id="Row3Col3" class=" span-2 drop-obj"></li>
            <li id="Row3Col4" class=" span-2 drop-obj"></li>
            <li id="Row3Col5" class=" span-2 drop-obj"></li>
            
            
                        <li id="Row4Col1" class=" span-2 drop-obj"></li>
            <li id="Row4Col2" class=" span-2 drop-obj"></li>
            <li id="Row4Col3" class=" span-2 drop-obj"></li>
            <li id="Row4Col4" class=" span-2 drop-obj"></li>

            <li id="Row4Col5" class=" span-2 drop-obj"></li>
            
            
                        <li id="Row5Col1" class=" span-2 drop-obj"></li>
            <li id="Row5Col2" class=" span-2 drop-obj"></li>
            <li id="Row5Col3" class=" span-2 drop-obj"></li>
            <li id="Row5Col4" class=" span-2 drop-obj"></li>
            <li id="Row5Col5" class=" span-2 drop-obj"></li>
            
           

    
    </ul>
    </div>
    
    <div id ="content" class="span-5 prepend-2">

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


  </div>



</html>

Top Reply

Response title

Attachments

jQuery Forum

Jquery Drag and Drop

Replies(2)

Re: Jquery Drag and Drop

Re: Jquery Drag and Drop

Statistics

Tags

Actions

Related Posts