jquery-ui-droppable can't discriminate two kinds of div that are draggable?

Question

I have a question in Jqueryui Droppable.Sorry, my English is poor. The satuation is: now,I have 3 divs,div a,div b and div cI make div a and div b to be draggable,div c to be droppable.DIV C can accept div a and div c. The question is,now div c can accpet div a and div b as Copy,or div c can accpet div a and div b as Shear.I hope that div c can accept div a as copy and div b as Shear.How can i get this?

Answer 1

Its (English) a common problem ;)

You can set class for draggable objects and then later match context at drop event.

$(function() {
    $( "#diva" ).draggable(
        drag: function(event, $ui) {
            $ui.addClass('copy');
        },
        stop: function(event, $ui) {
            $ui.removeClass('copy');
        }

    );
        $( "#divb" ).draggable(
        drag: function(event, $ui) {
            $ui.addClass('shear');
        },
        stop: function(event, $ui) {
            $ui.removeClass('shear');
        }

    );

    $( "#divc" ).droppable({
        drop: function( event, $ui ) {
            // you can access the dragglable html by this
            // and then can append it to anywhere, its like making its copy
                var html = $ui.draggable.html();
                if ($ui.draggable.hasClass('shear')) {
                    // destroy #divb here so that it looks like shear
                }
        }
    });
});