Question

我现在正在努力解决这个问题，我希望有人可以告诉我是否可以做我想到的事情。也许最重要的......怎么样，因为我不知道。

所以我想要实现的就是你在这里看到的：http://d.pr/h4N5。（对不起，我还不能发布图片，因为我是新来的）其中一个彩色框应该被拖入其中一个灰色框中。这就是我现在所取得的成就，编码。

但我需要知道灰色框的值是什么，以及哪些彩色框放在它上面。之后，我将把值放在数据库中。

例如：如果我将粉红色的盒子放在带有数字5的灰色方框上。我需要值：5和p。

希望你能理解我的问题。

我想知道是否可以将两个彩色盒子放在同一个灰色盒子上。

很多问题，但我真的希望有人可以帮助我！提前谢谢！

Answer 1

在droppables的drop事件上执行此操作：

$('.drop').droppable({
   drop: function(event, ui){
      var dropValue = $(this).text();
      var dragValue = ui.draggable.text();
   }
});

在drop事件中，$(this)指的是删除了某些内容的jQuery对象，ui.draggable总是为您提供已删除的jQuery对象。

Answer 2

查看jQuery UI API文档：

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

如果您给出灰色框类grey和颜色框类color，则可以使用以下内容，使用AJAX请求将其内容作为数据传递给PHP处理程序：

$('.color').draggable({
    revert: true
});

$('.grey').droppable({
    drop: function(event, ui) {
        var $drag = $(ui.draggable),
            $drop = $(this),
            data = {};

        data.drag = $drag.text();
        data.drop = $drop.text();

        $.ajax({
            url: "droppedToDatabase.php",
            type: "POST",
            data: data,
            success: function(response){
                // do whatever
            }
        }
    },
    tolerance: 'touch'
});

以下是用户界面的示例：http://jsfiddle.net/G2rZV/

如何从多个jQuery拖放中获取值

2 个答案: