Solved

Javascript drag and drop

Posted on 2013-11-14
5
292 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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript: How to show value of a specific value 5 49
Regular Expression Calculator Tester 2 59
jquery conditionally populate list boxes 2 24
Remove lines by logo 2 23
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

867 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

17 Experts available now in Live!

Get 1:1 Help Now