Solved

Javascript drag and drop

Posted on 2013-11-14
5
300 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
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 55

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 55

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

829 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