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();
jqueryhtmlcssjquery-ui

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

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 №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 №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 №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 №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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

Monitoring Twitter bootstrap modal for scrollbar reaching the bottom

Currently, I am working with Twitter Bootstrap modal and facing a challenge in determining how to detect when the scrollbar of the modal reaches the bottom using either JavaScript or jQuery. https://i.stack.imgur.com/0VkqY.png My current approach involve ...

javascriptjquerybootstrap-modal

What is the simplest method for fetching and parsing JSON data with jQuery and JavaScript?

I'm having trouble making this code snippet work. I can't seem to figure it out. The objective is to retrieve and parse a JSON object in the simplest and easiest way possible. Here's the code snippet. <!DOCTYPE html> <html> &l ...

javascriptjqueryhtmljsonajax

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

After watching a tutorial on YouTube by Gary Simon, I attempted to animate text using GSAP. Despite following the instructions meticulously and copying the CDN for GSAP and CSSRulePlugin just like him, nothing seems to be happening. Even setting my border ...

javascripthtmlcssgsap

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

htmlcss

Accessing JS code from HTML is not possible in React

Attempting to create a list using React, I have utilized the module found here: https://github.com/pqx/react-ui-tree I am currently testing out the sample application provided in this link: https://github.com/pqx/react-ui-tree/blob/gh-pages/example/app.js ...

javascripthtmlreactjs

Adjust the JSON format that is retrieved from an Ajax call

I am working with a JQuery plugin that includes the following code snippet: transformResult: function(response, originalQuery) { } Within this function, I have the task of converting Json data from the originalQuery to the response format: [ { "Id": ...

javascriptjqueryajaxjson

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing. The challenge I'm facing is that for certain rows, I want to apply a specific background color using ...

javascriptjquerycsshtml-table

Issue with slideout menu hyperlinks malfunctioning

Currently developing a site at , everything seemed ready for deployment until testing in 320x480 mode on mobile revealed that the links on the slideout menu were not working on any mobile device I tried, regardless of resolution or page. I've tried u ...

javascriptjqueryhtmlcss

Exploring the power of Knockout Js and Typeahead libraries

https://i.stack.imgur.com/38iZc.png Hello experts in Knockout and typeahead, I am receiving suggestions from the typeahead js as shown above. I have my data supplied in an array format var itemsRandom= ['Apple', 'Ball','Ape&apos ...

javascriptjqueryknockout.jstypeahead.js

Is there a way to mimic this type of scrolling effect?

Upon visiting this website, it is evident that the entire interface has been constructed with React. The scrolling experience on this site is exceptionally smooth, although it may feel slightly more substantial than a typical scroll. After researching onli ...

javascriptjquerycss

Utilizing SASS for customizable color schemes

I am in the process of creating a website using Rails 3 which will allow users to customize their profiles with different layouts and color schemes. I have already implemented SASS, and I believe it would be incredibly useful if I could achieve something l ...

ruby-on-railscsssass

Guide on utilizing every array value during each iteration of a for loop, ensuring that the same number of values

Below is the equipos_seleccionados array: ["12 - v4", "100 - v500"] This is a preview of the frontend: When you input values in the head section, textboxes are generated automatically. Objective: Assigning the value 12 - v4 to the fi ...

javascriptphphtmlarrays

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

Semi-transparent image

Can I achieve a semi-transparent image? Similar to this gradient: background:linear-gradient(to bottom,rgb(44, 44, 44),rgb(29, 38, 51,0.322)); ...

htmlcss

Display or hide several list items and blockquotes with the identifier #Quote using the ShowHide

I'm trying to create functionality where clicking on the Quote element hides itself and shows the full review. The current code is only functioning properly for the first list item. I have been struggling to debug it, as it's likely something si ...

jquery

I am consistently finding a class in my program, but when I try to locate the same class in the HTML, it seems to be non-existent

Here's the issue: when I manually search for a class = "warn," it only finds it if the seller does not have the card. This is because the text indicating that the card is unavailable has that class. However, the code below always returns TRUE even if ...

htmlselenium-webdriver

What is the best way to retrieve an object from every function?

I'm dealing with a <div> containing radio buttons: <div id='RB-01'> <span>Item_1</span><input type='radio' name='RB01' value='1'><br /> <span>Item_2</span><inp ...

javascriptjquery

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

Trigger specific scripts again after loading jQuery AJAX

Is there a way to make specific scripts re-run after an AJAX load is completed? ...

javascriptajaxjquery