YUILibrary - Open source JavaScript and CSS for building richly interactive software.
Fork YUI on GitHub
  [ 5 posts ]

Oliver

  • Username: Spider
  • Joined: Sat Aug 22, 2009 2:32 am
  • Posts: 3
  • Offline
  • Profile

Drag&Drop: Remove dragables from Dropcontainer

Post Posted: Thu Jul 22, 2010 6:57 am
+0-
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 Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 329
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Offline
  • Profile

Re: Drag&Drop: Remove dragables from Dropcontainer

Post Posted: Thu Jul 22, 2010 11:56 pm
+0-
Hi,

A couple of things. First, this code
Code:
            //Close Button
            var str = '<div class="mod">' +
                        '<div id="container">' + this.get('node').get('innerHTML') +
                        '<a title="close module" class="close" href="#" ></a></div>' +
                      '</div>';
will create multiple elements with id="container". I'd get rid of the id.

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

Oliver

  • Username: Spider
  • Joined: Sat Aug 22, 2009 2:32 am
  • Posts: 3
  • Offline
  • Profile

Re: Drag&Drop: Remove dragables from Dropcontainer

Post Posted: Fri Jul 23, 2010 4:14 am
+0-
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 Parker

YUI Contributor

  • Username: mattatlamplight
  • Joined: Mon Apr 20, 2009 12:03 pm
  • Posts: 329
  • Location: London UK
  • GitHub: mattparker
  • Gists: mattparker
  • Offline
  • Profile

Re: Drag&Drop: Remove dragables from Dropcontainer

Post Posted: Fri Jul 23, 2010 4:22 am
+0-
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

Oliver

  • Username: Spider
  • Joined: Sat Aug 22, 2009 2:32 am
  • Posts: 3
  • Offline
  • Profile

Re: Drag&Drop: Remove dragables from Dropcontainer

Post Posted: Fri Jul 23, 2010 2:21 pm
+0-
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 :)
  [ 5 posts ]
Display posts from previous:  Sort by  
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