| Page 1 of 1 | [ 5 posts ] |
|
Hey,
I made a drag and drop, based on this example: http://developer.yahoo.com/yui/3/exampl ... -drag.html Now it should also be possible to remove items from the drop area. For this I added a little close button, when an element was dropped. Can someone help me? Here you can see my example: http://www.bb-motorsports.de/dd/dd.html Thanks |
Matt ParkerYUI Contributor
|
Hi,
A couple of things. First, this code Code: //Close Button will create multiple elements with id="container". I'd get rid of the id.var str = '<div class="mod">' + '<div id="container">' + this.get('node').get('innerHTML') + '<a title="close module" class="close" href="#" ></a></div>' + '</div>'; To do something when the close button is clicked you'll need to add an event listener. There are various ways to do this; using event delegation you could do Code: Y.delegate("click", function (ev, el, container) { // Do what you need to do: el.ancestor("div.mod").remove(); // reset the form... }, "#workarea", "a.close"); Also, as an aside, you could remove your switch for Code: document.testform[myDropId].value = this.get('node').get('innerHTML'); Matt |
|
Quote: Also, as an aside, you could remove your switch for Code: Thx, good idea I have tryed your event delegation, but i get an error: Quote: undefined is null or not an object on Line 68 Sorry, but I dont know what exactly happens at this point. I am really a beginner in Javascript, use the first time the YUI. Whats about the close buttons? Any idea how to solve it? |
Matt ParkerYUI Contributor
|
My guess is you've not got the js for event delegation on the page; you'll need to add "event-delegate" to your use statement. Event delegation is well worth reading up on; it takes a bit to get but is very powerful and good for performance.
http://developer.yahoo.com/yui/3/event/#delegate to start with In the snippet I posted before, it's saying "listen for 'click's on the element with id workarea, or any of it's children, and if the element actually clicked was an <a> with class "close", call the function. In that function, ev is the event object; el is the element actually clicked (ie a.close) and container is the parent (i.e. element id="workarea" ). Matt |
|
Okay, i have solved it with this:
Quote: Y.delegate("click", function (ev, el, container) { // Do what you need to do: //el.ancestor("div.mod").remove(); //there is no Method "ancestor" in el !?!? By me, el is undefined, container too var myDropId = ev.currentTarget.get("name"); var div = Y.Node.get("#" + myDropId); div.set("innerHTML", ""); document.testform[myDropId].value = ""; }, "#workarea", "a.close"); The Close Buttons now works with this: Quote: var str = '<div class="mod">' + '<div id="' + myDropId + '">' + this.get('node').get('innerHTML') + '<a title="close module" class="close" href="#" name="' + myDropId + '" ></a></div>' + '</div>'; Now they are unique and fine i think. What do you think? Is it okay? Big thanks to you Matt |
| Page 1 of 1 | [ 5 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© YUI Library - Site Credits
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group