Question

我对jquery ui的拖放功能有疑问。我正在构建一个Web应用程序，用户可以通过将零件从零件区域（货架）拖到舞台上来构建自己的对象。该阶段将包含一个主要部件，该部件基本上是圆形的，这些子部件/部件将放置在该主要部件上。

这些部件是200px x 400px的图像，具有透明背景并且可以拖动。他们可以掉到舞台区域。现在我面临的问题是：

当我拖动这些物体并将其放置在舞台区域时，由于图像高度如此之大，它们往往会与货架区域重叠。这种重叠使得搁板区域中的部件不可选择或不可拖动。此外，当许多这样的部件在舞台上时，由于这种重叠，很难选择所需的部件。

是否有任何解决方案可以解决这个重叠问题。

开发平台是jquery ui和.net

Answer 1

您可以在将元素放在书架上时为其添加一个类，以减小它们的大小。

除了上下文之外，您没有提供太多信息，例如您用于拖放的插件。

我使用jQuery UI Droppable做了一个简单的例子。在drop event中，您可以向已删除元素添加css类，可通过ui.draggable访问。您还可以绑定out event，以便在您的元素被拖出目标时删除该类。

$("#droppable").droppable({
    drop: function(event, ui) {
        $(ui.draggable).addClass('small');
    },
    out: function(event, ui) {
        $(ui.draggable).removeClass('small');
    },
});

<强> DEMO

我想你可以让这个方法适应你自己的实现。

关于我项目中jqueryui的一个主要问题

1 个答案: