Solved

Javascript drag and drop

Posted on 2013-11-14
5
302 Views
Last Modified: 2013-11-20
Hi,

Im trying to make a basic drag and drop example.

i have example here: https://dl.dropboxusercontent.com/u/35928349/test/index.html

Dark grey square is my drop target.
This seems to work but sometimes it doesnt - any ideas? ie you drag something over the grey box and it doesnt always recognise that.

Also i want to animate the objects so that if someone drops an object outside the grey box it transitions it back to its original position using css3 animations.
Ive attempted this but it doesnt work as intended

Help appreciated!
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
ID: 39650467
One problem I see there is that you're not handling the dragleave event, so you never know when things are taken out.
Also dragenter is being triggered when you actually take things out.

It's a some work already done there but have you considered using jQuery UI for this?
Look at this sample for instance:
http://jqueryui.com/droppable/#photo-manager
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39650511
I am with AlexCode on this - JQueryUI has solved a lot of the problems you want to solve.

I have done a lot of similar work to what you are doing using JQueryUI - it was quite easy in the end.
0
 

Author Comment

by:coolispaul
ID: 39650554
yeah i just wanted to try it natively rather than use jquery as i am learning javascript.

I see in jquery when you drag something it actually moves it rather than create a ghost copy of itself. How can i replicate that in javascript alone?

Thanks
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39650581
To move items around they have to have a position:absolute set.
When this is set you need to translate the element relative position to its absolute position.
For this you need to use the element's properties:
var elem = document.getElementById("myDiv");
var posX = elem.offsetLeft;
var posY = elem.offsetTop;
var width = elem.offsetWidth;
var height = elem.offsetHeight;

Open in new window


Have a look here to get the correct element dimension:
https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements

Then you just have to play with it position relative to the mouse pointer and handle the mouse down and mouse up events.
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 39650607
JQueryUI has an option to clone the item - so when you drag and drop it you can clone the item and drop that. There are examples on their drag and drop page that demonstrate this.

Also have a look here http://jqueryui.com/droppable/#revert with respect to your question on how to animate the object back to its position when dropped out side of the drop zone.

In terms of learning Javascript - understandable but consider this. Solve the problem you are trying to solve with JQuery/JQueryUI - that will allow you to see the working solution in action - from there you can start looking at how each of the stages is accomplished. I found this much easier than trying to figure it all out in JS from scratch.

There are two hurdles to overcome when learning this stuff - the first is getting a handle on the language and how it hangs together and the second is the more generic theory on how dragging and dropping works. By going the JQuery route you can quickly get on top of the second and then at your leisure backward engineer to understand the first.

Not saying you have to do it that way - I just found that it really helped me get up to speed to use this approach.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery element reference issue 2 38
Add Rows on a Table 8 51
XJS:  how to throw error if no match found 8 56
Javascript function 3 18
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question