如何拖放点击元素？

Question

我正在研究jquery拖放。我的侧边栏中有一些图像。用户可以从侧边栏拖动图像，然后可以放入dropable div.drag并且drp工作正常。但是现在我需要当用户点击侧边栏中的任何（图像/项目）时，该图像将自动丢弃在可丢弃的div中。我创建了一个拖放功能。我试着把这个功能称为侧边栏图像，但它不起作用。任何想法我怎么能做到这一点。这是我拖放图像的代码。

jQuery(document).ready(function () {

     makemedragable();
});

function makemedragable()
{
    var x = null;
    jQuery(".get-image .drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true,
    start: function (event, ui) {
        jQuery(this).prop('onclick', '');
    }   
    /* stop: function (event, ui) { ... } */

});
//jQuery(".droppable .drag").draggable({ });

    jQuery(".droppable").droppable({
        accept: '.drag',
        activeClass: "drop-area",
        drop: function (e, ui) {
            if (jQuery(ui.draggable)[0].id != "") {

                x = ui.helper.clone(); 
                ui.helper.remove(); 

                jQuery("#droppable .resize-img").removeClass("mycurrent");
                x.addClass("mycurrent");

                jQuery("#droppable .resize-img").css({"display":"inline-table"});
                /* To show Controls first time on Dragged Image*/
                var droppedItemId = ui.draggable.attr("data-item-id");
                jQuery(".controls ").attr("controls-item-id",droppedItemId);
                jQuery("#droppable").find(".ui-resizable-handle").hide(); // To show Controls
                jQuery(".controls").show();
                dragEl        = jQuery(this); 
                stopPosition  = dragEl.position(); 
                var height = x.height();  // To show the controls with exact position
                var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos);
                var topPos = ui.position.top;
                var leftPos = ui.position.left;
                var mytop = topPos+height;
                var myleft = leftPos + width /2; 
                    //alert("left"+leftPos);        
                jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});

                x.draggable({   
                    helper: 'original', 
                    cursor: 'move',
                    containment: '#droppable',
                    tolerance: 'fit',

                    drop: function (event, ui) { 
                        jQuery(ui.draggable).remove();

                    },
                    drag: function() {

                    },
                    stop: function() {

                        jQuery("#droppable .resize-img").removeClass("mycurrent");
                        x.addClass("mycurrent");
                        dragEl        = jQuery(this);
                        stopPosition  = dragEl.position();
                        var leftPos =    dragEl.position().left; 
                        var topPos =     dragEl.position().top; 
                        stopOffset  = dragEl.offset();
                        document_id   = dragEl.data("document-id");
                        signer_id     = dragEl.data("signer-id");
                        var height = x.height();
                        var width = x.width();
                        var mytop = stopPosition.top+height;
                        //var myleft = stopPosition.left + width /2; 

                        jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});

                        dataItem = jQuery(this).attr('data-item-id');
                        jQuery("#droppable").find(".ui-resizable-handle").hide();
                        jQuery(".controls").hide();
                        jQuery(this).closest(".drag").find(".ui-resizable-handle").show();
                        jQuery(".controls").show();
                        jQuery(".controls ").attr("controls-item-id",dataItem); 

                    } 

                }); 

                x.resizable({
                    maxHeight: jQuery('#droppable').height(),
                    maxWidth: jQuery('#droppable').width(), 
                    aspectRatio: true,
                    helper: "ui-resizable-helper", 
                    handles: "nw, ne, sw,se" 
                });  

                //x.addClass('remove');

                x.appendTo('.droppable');


            }
        } 
    });

/* To remove the Element on remove click */
jQuery("#droppable .controls li.canvas-remove-item").on('click', function (e) 
{
    var removeId = jQuery(".controls").attr("controls-item-id");
    //jQuery('#droppable .resize-img').filter('[data-item-id = '+removeId+']').remove();
    jQuery('#droppable .mycurrent').remove();   
    jQuery("#droppable").find(".ui-resizable-handle").hide();
    jQuery(".controls").hide();

});  


}

我正在尝试这种方式。请帮助解决问题。

jQuery( "ul.get-image .resize-img" ).click(function( event ) {
      var $item = jQuery( this );
        //$target = jQuery( event.target );

        addImage( $item );

      return false;
});


function addImage( $item ) {

        var x = null;
        var x  = $item.clone();
        jQuery(".droppable .resize-img").removeClass("mycurrent");
        x.addClass("ui-draggable-dragging mycurrent ui-resizable");
        x.appendTo('.droppable');

        jQuery(".droppable .resize-img").css({"display":"inline-table"});
        /* To show Controls first time on Dragged Image*/
        var droppedItemId = x.attr("data-item-id");

        jQuery(".controls ").attr("controls-item-id",droppedItemId);
        jQuery(".droppable").find(".ui-resizable-handle").hide(); // To show Controls
        jQuery(".controls").show();

        var height = x.height();  // To show the controls with exact position
        var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos);
        var topPos = x.position().top;
        var leftPos = x.position().left;
        var mytop = topPos+height;
        var myleft = leftPos + width /2; 
        jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});

        mydraggable(x); 

        myresizeable(x); 


}

Answer 1

试试这个。

jQuery(document).on('click', '#droppable .controls li.canvas-remove-item', function (e) 
{
    var removeId = jQuery(".controls").attr("controls-item-id");
    //jQuery('#droppable .resize-img').filter('[data-item-id = '+removeId+']').remove();
    jQuery('#droppable .mycurrent').remove();   
    jQuery("#droppable").find(".ui-resizable-handle").hide();
    jQuery(".controls").hide();

});