jquery ui sortable modify html on creation

Question

i have a page with 2 elements:

a list of items with draggable method
a lost of items with sortable method

i only allow dragging from list 1 to list 2, and that seems to work ok.

now, what i'm looking for is that when i drag item from list 1 to list 2 the newly created element will contain some different html then the element that was dragged. is that possible?

iv'e tried this approach but that does not seem to do to the job:

    $("#list_2").sortable({
        placeholder: "ui-state-highlight",
        cursor: "move",
        delay: 150,
        forcePlaceholderSize: true,
        opacity: 0.5,
        scrollSpeed: 40,
        receive: function( event, ui ) {
            ui.item.html(ui.item.find(".hide").html());
}
});
        $("#list_1").disableSelection();
        $(".draggable").draggable({
        connectToSortable: "#template_parts",
        helper: "clone",
        revert: "invalid",
        stop: function( event, ui ) {
    }
            });

any help shall be greatly appriciated

Can you add your html or make a jsfiddle.net with an example? Thanks — Trevor
– Trevor, Commented Nov 25, 2013 at 23:00
I can't get dragging from list 1 to list 2 to work in your fiddle. Your calling draggable on .draggable but I don't see anything with that class in your HTML.. — Trevor
– Trevor, Commented Nov 25, 2013 at 23:30

Trevor · Accepted Answer · 2013-11-26 15:51:10Z

3

var received = false;
$(function() {
    $( ".draggable" ).draggable({
        connectToSortable: "#list_2"
    });
    $( "#list_2" ).sortable({
        receive: function(event,ui){
            received = true;
        },
        stop: function(event,ui){
            if(received){ 
                ui.item.css('color','blue');
                ui.item.html(ui.item.html()+' changed');
                received = false;
            }
        }
   });
   $( "#list_2" ).disableSelection();
});

Example

http://jsfiddle.net/jd8A7/4/

answered Nov 26, 2013 at 15:51

Trevor

16.1k10 gold badges56 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Trevor Over a year ago

@sd1sd1 please mark this answer as accepted it helped answer your question or give feedback. Thanks

sd1sd1 Over a year ago

hello trevor. actually, this is not what i meant. i have an html elemnent inside the ui but calling ui.item.html(ui.item.html().find(".div_name").html()); does not seem to work

sd1sd1 Over a year ago

i manageed to make my previous question work stop: function(event,ui){ if(received){ htm = ui.item.find(".hide").html(); ui.item.html(htm); received = false; } }

Collectives™ on Stack Overflow

jquery ui sortable modify html on creation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related