drag and drop

[Sabmin]

Trying to learn this: http://jqueryui.com/demos/draggable/ which for the most part seems simple enough but not being very well versed in javascript I was looking for some help on handling certain events when an item is dropped… for example when one item is put somewhere a different specific droppable element should move/be cloned to another specific area.

Also since I’m going to have a dynamic number of these elements all with specific target locations am I going to need a specific function for each element?

[Sabmin]

html:
[php]

AAAAAA

---

BBBBBB

---

 

---

 

[/php] script: [php] $(".draggable").draggable({ helper: "clone" }); $(".dropbox").droppable({ drop: function(event, ui) { $("

").text(ui.draggable.text()).appendTo(this); if($(element.draggable).parent().attr("id") === 2) { $("#changetodrag").html($("#1").html()); } if($(element.draggable).parent().attr("id") === 1) { $("#changetodrag").html($("#2").html()); } } }) [/php] found this cool little site: [url=http://jsfiddle.net/UrMrt/12/]http://jsfiddle.net/UrMrt/12/[/url] which allowed me to test the above, which doesn't work.....

[Sabmin]

an update, I got it working sort of…: [php]http://jsfiddle.net/UrMrt/66/[/php] I just would now like to know how to make it if you drop an item on it a second time it would overwrite rather than add to it.

also once I had figured that out I tried to actually do something useful with it and in complicating it I broke it. as can be seen here: [php]http://jsfiddle.net/LjQuK/35/[/php]

So help still would be appreciated in this headache of a language I never did like.

[Sabmin]

Almost there:
http://jsfiddle.net/LjQuK/142/

I just can’t figure out why it’s not inserting the 2nd data…

[Sabmin]

[php]$(".make-draggable, .draggable").draggable({
helper: “clone”,
snap: “.draggable”,
snapMode: “inner”
});
$(".draggable").droppable({
drop: function(event, ui) {
var elemText = ui.draggable.text();
$(this).html(elemText);
var outB = ui.draggable.attr(‘id’).split("-");
if (outB[0] == “go”) {
var num = outB.length;
var loser;
var loserval;
var losloc;
var losid = outB[1];
if (num === 2) {
loser = (losid.charAt(0) + “-” + losid.charAt(1));
loserval = $("#go-" + loser);
}
if (num === 3) {
loser = (outB[1] + outB[2]);
loserval = $("#go-" + loser);
}
losloc = ("#"+loser);
$(losloc).html(loserval.text());
}
}
});[/php]

Everything is working except when num is 2 and I just can’t figure it out… I had it at one point where it would just display loser and it displayed properly, the html markup is accurate why isn’t this working! :’(

[Sabmin]

I’m a moron! all fixed: [php]http://jsfiddle.net/LjQuK/172/[/php]

[ErnieAlex]

Very interesting, Sabmin! This is cool stuff! Not sure what I could use it for, but, plan to play with it some one day soon… Thanks for the heads up on this code! Glad you got yours working.

[Sabmin]

Thank you sir, if you change to http://jsfiddle.net/LjQuK/180/ it’s actually the real fixed one, as there was an issue when the id didn’t fit perfectly. For all the time I spent on this I’m really excited to get it incorporated into the site and pollish it up.

My biggest worry is trying to figure out how throw in some extra security to help avoid moving people to the wrong spot as id’s get rather complicated when supporting a large number of players.

The interesting thing is there is nothing like this on the internet that I’ve been able to find that doesn’t charge to much for your average joe in a pool hall or wherever to use so it’ll be nice to create something for them. Maybe I’ll accept donations or create a premium service for stringing together to form a league or something.