CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
SuicideSheep
SuicideSheep

Reputation: 5550

A simple draggable DIV using jQuery-UI

I would like to make the div innerDropzone draggable for below code:

 div.example {
   width: 560px;
   height: 750px;
   display: block;
   padding: 10px 20px;
   color: black;
   background: rgba(255, 255, 255, 0.4);
   -webkit-border-radius: 8px;
   -khtml-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   margin-bottom: 10px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   position: relative;
   float: left;
   margin-right: 40px;
 }
 #dropzone {
   height: 530px;
   width: 530px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 2px dashed #0687FF;
   display: block;
   background-image: url(/Images/RE/02.png);
 }
 #imgzone {
   height: 150px;
   width: 150px;
   overflow: auto;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   border: 2px groove #0687FF;
   float: left;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<div class="example">
  <div id="dropzone" style="text-align: center; float: left">
    <div id="innerDropzone" style="position: absolute; top: 20px; left: 30px; width: 250px; height: 250px">
      <img style="display: none;" id="img" src="nothing" />
    </div>
    <div id="hint" style="position: absolute; top: 22%; left: 30%;">Drop in images from your desktop</div>
  </div>
  <div id="imgzone">
    <div id="imagelist">
      <img id="sampleImg" src="/Images/RE/02.png" width="100px" height="100px" style="margin: 10px;" />
    </div>
  </div>
</div>

I tried to make the DIV draggable as below however it failed:

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

Upvotes: 9

Views: 29645

Answers (6)

Adam &#39;Sacki&#39; Sackfield
Adam &#39;Sacki&#39; Sackfield

Reputation: 602

see this site http://jqueryui.com/draggable/ it has a guide to do what you are trying to do. Also ensure in your example you are referencing the jQuery library

Upvotes: 0

sangram parmar
sangram parmar

Reputation: 8726

For Jquery-ui version 1.8.23 is not compatible with jquery 1.9.1. (as per what i experience)

However as i found on this Wiki link Jquery-ui 1.8.23 is compatible with Jquery 1.3.2+.

I test your html with latest libraries, everything is working fine..here is fiddle

So it is Jquery UI and Jquery library compatibility issue. Use latest or compatible libraries.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Upvotes: 1

itacode
itacode

Reputation: 3787

If you need only to make a div draggable, please try following my script in jQuery, working also on touch devices.

;(function ($, window, document, undefined) {
var $canvas = $('#canvas'),
    canvT = $canvas.offset().top,
    canvL = $canvas.offset().left,
    $elem = $('<div/>', {
      'class': 'ball'
    }),
    offL = 0,
    offT = 0,
    dragging = 0,
    touchDev = 0;
var onDrop = function onDrop(e) {
  $(document).off('mousemove.dp');
  $(document).off('mouseup.dp');
  dragging = 0;
};
var onDrag = function onDrag(e) {
  $elem.css({
    'left': e.pageX - canvL + offL,
    'top': e.pageY - canvT + offT
  });
};
$elem.appendTo($canvas);
if ('touchstart' in window) {
  touchDev = 1;
}
//touchDev = 1;
if (touchDev === 0) {
  console.log('mousedown');
  $elem.on('mousedown', function (e) {
    if (dragging === 0) {
      offL = $(this).offset().left - e.pageX;
      offT = $(this).offset().top - e.pageY;
    }
    dragging = 1;
    $(document).on('mousemove.dp', onDrag);
    $(document).on('mouseup.dp', onDrop);
  });
} else {
  $elem.on('touchstart', function(event) {
    var e = event.originalEvent;
    var touch = e.targetTouches[0];
    offL = $(this).offset().left - touch.pageX;
    offT = $(this).offset().top - touch.pageY;
  });
  $elem.on('touchmove', function(event) {
    var e = event.originalEvent,
        touch;
    if (e.targetTouches.length == 1) {
      touch = e.targetTouches[0];
      onDrag(touch);
    }
  });
}
})(jQuery, window, document);

CSS

* {
  margin: 0;
  padding: 0;
}
#canvas {
  position: relative;
  top: 20px;
  left: 20px;
  width: 300px;
  height: 300px;
  border: 1px solid;
}
.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  background-color: green;
  border-radius: 9999px;
}

JS Bin http://output.jsbin.com/joweca/

Upvotes: 1

Rashid
Rashid

Reputation: 1384

I thing nothing big wrong in your code. Seeming that your are using JQuery $('#innerDropzone').draggable(); in head tag.
Just wrap it in function like this:

$(function () {
    $('#innerDropzone').draggable();
});

Upvotes: 0

cmsonnet
cmsonnet

Reputation: 45

Have a look example on this website, it show pretty simple code to use jquery drag and drop. http://www.overpie.com/jquery/articles/jquery-drag-and-drop-example

Upvotes: 0

Rameez
Rameez

Reputation: 1712

 <img style="display: none;" id="img" src="nothing"/>

How you'll able to see element when image inside has display none, give it style like

#innerDropzone { width: 150px; height: 150px; padding: 0.5em; border:1px solid #000; }

It's draggable, check here

Upvotes: 0

Related Questions