Solved

Javascript drag and drop

Posted on 2013-11-14
5
288 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
  • 2
  • 2
5 Comments
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 250 total points
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
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 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now