Drag and drop div

Question

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

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

You Should use the draggable plugin in jquery UI

$('#drag1').draggable();

Jquery Example

For more information follow below link

StackOverflow

Or :

Draggable Example

edited May 23 '17 at 10:31

Community

1
1

answered Jan 30 '14 at 05:00

Govinda Rajbhar

2,926
6
37
62

score 1 · Answer 2 · answered Jan 30 '14 at 04:56

1

You can use the draggable plugin in jquery UI

$('#drag1').draggable();

answered Jan 30 '14 at 04:56

jacquard

1,307
1
11
16

score 1 · Answer 3 · answered Jan 30 '14 at 05:01

1

I agree, you could use jqueryUI's draggable.

For your html example, you can do it this way:

$("body > div").draggable();

You can also add a class to all draggable divs, say "draggable-container". And use:

$(".draggable-container").draggable();

answered Jan 30 '14 at 05:01

jinmichaelr

883
6
9

score 1 · Answer 4 · answered Jan 30 '14 at 05:24

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/

score 1 · Answer 5 · answered Jan 30 '14 at 05:36

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>

Thanks for the code. it works. but the concern is that i want to drop the boxes anywhere in the page, not in a particular section.. is this possible? — Shareer, Jan 30 '14 at 06:17
Yeah, remove the `{revert: true}` from draggable section. The color boxes can easily move any place on the page. — Selvamani, Jan 30 '14 at 06:29

Drag and drop div

5 Answers5