Creating an interactive draggable box with jQuery-UI is as easy as pie

Question

Creating an interactive draggable box with jQuery-UI is as easy as pie

Is it possible to make the innerDropzone div draggable in the following code snippet?

 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 attempted to enable drag functionality for the DIV like this but it didn't work:

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

jquery html css jquery-ui

Answer 1

Answer №1

According to my experience, I discovered that Jquery-ui version 1.8.23 is not compatible with jquery 1.9.1.

However, after doing some research on this Wiki link, I found out that Jquery-ui 1.8.23 is actually compatible with Jquery 1.3.2+.

I have tested your html with the latest libraries and everything seems to be working fine. You can check it out on this fiddle.

It appears to be an issue of compatibility between Jquery UI and Jquery library. Make sure to use the 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>

Answer 2

According to my experience, I discovered that Jquery-ui version 1.8.23 is not compatible with jquery 1.9.1.

However, after doing some research on this Wiki link, I found out that Jquery-ui 1.8.23 is actually compatible with Jquery 1.3.2+.

I have tested your html with the latest libraries and everything seems to be working fine. You can check it out on this fiddle.

It appears to be an issue of compatibility between Jquery UI and Jquery library. Make sure to use the 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>

Answer 3

Answer №2

For those looking to enable drag functionality on a specific div using jQuery, especially on touch-enabled devices, you can make use of the script below.

;(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

Answer 4

For those looking to enable drag functionality on a specific div using jQuery, especially on touch-enabled devices, you can make use of the script below.

;(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

Answer 5

Answer №3

<img style="visibility: hidden;" id="img" src="nothing"/>

Is it possible to make an element visible even when the image inside is set to display none? Try using a different approach like this:

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

This element is draggable, you can test it out here

Answer 6

<img style="visibility: hidden;" id="img" src="nothing"/>

Is it possible to make an element visible even when the image inside is set to display none? Try using a different approach like this:

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

This element is draggable, you can test it out here

Answer 7

Answer №4

If you're interested in learning how to use jquery drag and drop, check out this website for a straightforward example of the code.

Answer 8

If you're interested in learning how to use jquery drag and drop, check out this website for a straightforward example of the code.

Answer 9

Answer №5

It seems like there isn't anything majorly wrong with your code. It looks like you're using JQuery $('#innerDropzone').draggable(); in the head tag.
Just make sure to wrap it in a function like this:

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

Answer 10

It seems like there isn't anything majorly wrong with your code. It looks like you're using JQuery $('#innerDropzone').draggable(); in the head tag.
Just make sure to wrap it in a function like this:

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

Answer 11

Answer №6

Check out this website http://jqueryui.com/draggable/ for a helpful guide on achieving what you're attempting to do. Make sure to include a reference to the jQuery library in your example as well.

Answer 12

Check out this website http://jqueryui.com/draggable/ for a helpful guide on achieving what you're attempting to do. Make sure to include a reference to the jQuery library in your example as well.

Creating an interactive draggable box with jQuery-UI is as easy as pie

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Clicking on the button will result in the addition of new

Prevent the button from being enabled until the file input is updated

Show a variety of pictures in a random arrangement?

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

When a 404 error occurs in jQuery ajax, the ajaxStop event is not triggered

Aligning text vertically to the top with material UI and the TextField component

Is there a method to uncover the code that controls the display of a <div> element?

Deleting a segment of code in HTML with Python

Dealing with AngularJS memory leaks caused by jQuery

Modifying HTML attributes using AngularJS

Conceal a division on a webpage according to the URL of the specific

interacting with data tables using a jQuery selector or through an application programming

Ellipsis not displaying correctly in a paragraph class with text overflow issue

Javascript malfunctions upon refreshing the div

Tips for Aligning an Image Just Above a Card in Mobile and Tablet Screens with Tailwind CSS

What is the proper way to handle a 504 response header in an AJAX request using jQuery?

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

Is there a way to align my two tables next to each other using CSS?

Trigger a popup notification with JavaScript when

Remove the default selection when a different option is chosen using Bootstrap