onclick时如何放下可拖动的div？

Posted 2023-05-08

【中文标题】onclick时如何放下可拖动的div？

【英文标题】：How to drop the draggable div when onclick on it?

【发布时间】：2016-11-26 06:16:55

【问题描述】：

我有一个元素需要在拖放时放入 droppable(Jquery UI droppable) div 中（效果很好），但我需要在单击时放入相同的元素。

我需要上述功能的原因：代码会重复，同时使用单独的代码克隆并在单击时将元素附加到可放置的 div 中。我需要对两者使用相同的代码。如何将onclicked元素（可拖动元素）传递给drop函数？

$(document).ready(function() 

    var cloned_element;

    $("#draggable").draggable(
        helper: 'clone',
        revert: true
    );

    $("#droppable").droppable(
     
        drop: function(event, ui) 
        
            cloned_element = $(ui.helper).clone();
            ui.helper.remove();
            cloned_element.appendTo(this);

            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
        
    );

    $('#draggable').on('click',function()
    
        $(this).trigger("drop", $('#droppable'));
    );    
);

Jsfiddle..!中的示例代码

【问题讨论】：

你能详细说明一下吗？所以你不想要拖放功能？点击 draggable ，它应该落入 droppable ？

@ Yo Yo .. 我使用了拖放，还使用了 onclick 将元素附加到可放置的 div 中。我使用放置的 div 来调整大小、旋转，就像可放置 div 中的各种功能一样，所以当我使用单独的 onclick 函数时，这些代码会重复。

好的，看看我的答案！

【参考方案1】：

我认为您不能在 click 上触发拖放功能。 但是你可以做这样的事情

 $('#draggable').on('click',function()
        
            cloned_element = $("#draggable").clone();
            cloned_element.attr("id","").css("position","absolute");
            cloned_element.find("p").html("Dropped!");
            cloned_element.appendTo("#droppable");
        ); 

Working demo

Demo 用于您的第二个查询。 - 如何将 resizable() 分配给所有删除的元素。

【讨论】：

@ Yo Yo ...我不需要这个单独的功能。我有这个代码。当我对克隆元素使用 Jquery UI 可调整大小或其他功能时，我需要为拖放和单击功能重复代码。你能明白我需要什么吗..？请帮帮我

@Yo Yo.. 或任何其他方式将 onclicked 元素传递给 drop 函数..？

@ArunValaven ：您的问题是 如何在单击时放下可拖动的 div？ 我回答了。好的，我也会尝试解决这个问题

@ArunValaven ：您可以做的是为所有拖放的元素（通过单击或拖动创建）分配一个相同的类（比如.dropped_box），并为该类分配任何 JQuery-UI 功能 - @ 987654325@ 或其他。它应该工作

@ArunValaven：看到两者都是不同的事件。您需要将功能分配给这两个事件。 ，或在两个事件中调用一个函数，该函数将包含您要添加的所有已声明的 jquery 功能