如何将图像拖放到容器中，然后根据拖放到容器中的内容更新容器？

Posted 2023-05-08

【中文标题】如何将图像拖放到容器中，然后根据拖放到容器中的内容更新容器？

【英文标题】：How can I drop an image to a container and then update the container based on what was dropped to it?

【发布时间】：2011-07-05 01:33:57

【问题描述】：

我希望能够将图像拖到两个容器之一（容器 1 和容器 2）中。从那里，根据图像被删除到哪个容器，我想用一个数据库调用来更新那个容器（或者只是更新我的一个表中的一行）。

我想使用http://jqueryui.com/demos/droppable/ 来实现这一点，但我不确定如何处理请求，以及如何让每个容器监听事件处理程序（删除图像）。

我在下面画了一个非常糟糕的图表来解释我的意思：

【问题讨论】：

+1，优秀图表！

s/really bad diagram/freakin' awesome diagram/

【参考方案1】：

droppable demo 准确地展示了如何做这种事情。

$(function() 
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable(
        drop: function( event, ui ) 
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        
    );
);

My own really basic demo →（更新）

【讨论】：

这太棒了。谢谢！存储多票的最佳方法是使用 cookie 还是我应该只获取 ip 并将其与我的数据库中另一行中投票的 last_ip 进行比较？

@bob_cobb：我不太清楚你所说的“多票”是什么意思。每个用户是否允许每张图片投票一次？执行匿名投票很困难，因为 IP 地址可以更改，并且可以（非常容易）删除 cookie。通常，这是通过用户帐户系统解决的，其中投票与帐户相关联，而不是 IP 地址或（真的，只是不要使用）cookie。