/    Sign up×
Community /Pin to ProfileBookmark

Drag and drop elements and ignore child elements

Copy linkTweet thisAlerts:
Feb 27.2007

Hi All

I have been following tutorials on the web to create a mock up of a image gallery where a user can rearrange their images by dragging and dropping the content and also dragging them into another container (the basket container)

all the dragging and dropping seems to work well, however the drag event only happens on the containing div, so when you click on the image the dragging doesnt happen. I want to be able to store the image in a div, so i can then include other information too (such as image name) but i want it so when you click the image or the text it basically ignores that click and bubbles the event back to the div (so the div is always moved)

My code example is located here

[url]http://labs.sysdia.com/gallery/gallery.php[/url]

you should be able to view all the code from there (however if you want me to post the code then just let me know, it is a fair bit of code though!)

if you try the link out, you will see that when you try and drag an image it doesnt move, but if you drag the containing div then the whole thing moves ok.

does anyone know how i can achieve this same thing but be able to click the div or anything within the div and still move the whole thing?

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsFeb 27.2007 — [CODE]function mouseDown(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
iMouseDown = true;
if(target.onmousedown || target.getAttribute('DragObj'))
{
return false;
}
while(target.tagName!='DIV'){
target=target.parentNode;
}
..........[/CODE]
×

Success!

Help @thestonefox spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...