Client Side Coding > Javascript & Ajax

drag and drop

(1/2) > >>

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 Code: ---<div class='draggable' id='1'>
     AAAAAA
</div>
<hr/>
<div class='draggable' id='2'>
     BBBBBB
</div>
<hr/>
<div class='dropbox'>
    &nbsp;
</div>
<hr/>
<div id='changetodrag'>
    &nbsp;
</div>
--- End code ---

script:

--- PHP Code: ---
$(".draggable").draggable({
    helper: "clone"
});
$(".dropbox").droppable({
    drop: function(event, ui) {
        $("<div></div>").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());
        }
    }
})

--- End code ---

found this cool little site:
http://jsfiddle.net/UrMrt/12/
which allowed me to test the above, which doesn't work.....

Sabmin:
an update, I got it working sort of...:
--- PHP Code: ---http://jsfiddle.net/UrMrt/66/
--- End code ---
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 Code: ---http://jsfiddle.net/LjQuK/35/
--- End code ---


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 Code: ---$(".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());
        }
    }
});
--- End code ---


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! :'(

Navigation

[0] Message Index

[#] Next page