Reputation: 101

Drag and drop div

I have few classes in my web page which i would the users to drag and place it where ever they want in the page.

HTML CODE

<html>
<head>
<style>
  #drag{ width: 100px; height: 100px; padding: 0.5em; background:red; margin-bottom:10px;}
  #drag1{ width: 100px; height: 100px; padding: 0.5em; background:blue; margin-bottom:10px;}
  #drag2{ width: 100px; height: 100px; padding: 0.5em; background:green; margin-bottom:10px;}
  #drag3{ width: 100px; height: 100px; padding: 0.5em; background:yellow; margin-bottom:10px;}
</style>
</head>
<body>

<div id="drag">
  <p>Drag me around</p>
</div>

<div id="drag1">
  <p>Drag me around</p>
</div>

<div id="drag2">
  <p>Drag me around</p>
</div>

<div id="drag3">
  <p>Drag me around</p>
</div>


</body>
</html>

i want the simplest jquery code to implement this feature. please assist

Upvotes: 0

Answers (5)

Selvamani

Reputation: 7684

Here the full code of jquery drag and drop

    <html>
    <head>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>

        $(document).on("ready", function(){
        var c = 5;
        $( "#drag, #drag1, #drag2, #drag3" ).draggable({revert: true});
        $( "#droppable" ).droppable({
                accept      : '#drag, #drag1, #drag2, #drag3',
                activeClass : 'drag-active',
                hoverClass  : 'drop-hover',
           drop: function( event, ui ) {
            var source = ui.draggable.clone();
            source.removeAttr( "style" );
            var style = {
                position: "absolute",
                top: c,
                left: c
            }
            source.css( style  );
            $("#droppable").append(source);
            c += 10;
          }
        });

      });
      </script>

    <style>
      #drag{ width: 100px; height: 100px; padding: 0.5em; background:red; margin-bottom:10px;}
      #drag1{ width: 100px; height: 100px; padding: 0.5em; background:blue; margin-bottom:10px;}
      #drag2{ width: 100px; height: 100px; padding: 0.5em; background:green; margin-bottom:10px;}
      #drag3{ width: 100px; height: 100px; padding: 0.5em; background:yellow; margin-bottom:10px;}
      #droppable{ width: 150px; height: 150px; border: 1px solid black;position:absolute;top:0;right:0;}
    </style>

    </head>
    <body>

    <div id="drag">
      <p>Drag me around</p>
    </div>

    <div id="drag1">
      <p>Drag me around</p>
    </div>

    <div id="drag2">
      <p>Drag me around</p>
    </div>

    <div id="drag3">
      <p>Drag me around</p>
    </div>

    <div id="droppable">
    <p>drop here</p>

    </div>

    </body>

    </html>

Upvotes: 1

aelor

Reputation: 11116

Okay I will guide you step by step :

You need to have two external files in your head part.
The first one being jquery and the second one is jquery ui
You can select any div and add the draggable option to it like this $("#drag").draggable();
See for errors like c.browser is not defined and c.curPos is not defined in the firebug window.
These errors may arise due to jquery version you are using, as c.browser was removed in jquery 1.9.
Your final draggable code should look like this in a fiddle.

http://jsfiddle.net/LHELM/