Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 309
  • Last Modified:

Javascript drag and drop

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
coolispaul
Asked:
coolispaul
  • 2
  • 2
2 Solutions
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
Julian HansenCommented:
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
 
coolispaulAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
Julian HansenCommented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now