Javascript 为图像拼图添加拖放事件类

嘿，伙计们，我正在为一个项目使用Django模板系统和引导，在这个项目中，我需要jquery图像拖放。我对jquery或javascript一无所知。 到目前为止，我已经实现了图像拖放，但现在我想添加一个关于拖放事件的类

在我的要求这里，我有一个图像剪成五块。每件物品都储存在一个容器中。用户可以拖动一个片段将其放入另一个容器中以完成图像。但当我把它放在另一个容器中时，所有的图像都是垂直对齐的，而不是与前一个片段连接在一起

所以我决定在drop事件中添加一个类，它可以将style=“position:absolute；属性添加到图像中

我希望你已经了解我的问题。我知道这是一个核心问题，但请帮助我们的代码

在这里，我将它添加到了JSFIDLE上，这样您就可以在这里玩了

代码

---

$（函数（）{
$（“#可排序1”）。可排序({
连接到：“div”
});
$（“#可排序2”）。可排序({
连接到：“div”
});
$（“#可排序1，#可排序2”）.disableSelection（）；
});
{%endblock headercontent%}
{%block content%}
收集优惠券零件
第一部分
第二部分
第三部分
第四部分
第五部分
画布部分

有几点：

• 当您询问客户端Javascript问题时，最好不要让服务器端标记弄脏了水域。因此，像这样的非HTML模板可能应该扩展（例如，从视图源代码）或删除：

   {% extends "dashboard.html" %}
  
   {% block headercontent %}
  

• 在这个代码块中，您的代码已经有了一个在拖放时添加类的示例（至少如果我对jQuery拖放的猜测正确的话；这已经是很长时间了）

  drop: function( event, ui ) {
      $( this )
          .addClass( "fullbowl" )
          ^^^^^^^^^^^^^^^^^^^^^^^^
          .find( "div" )
          .html( "" );
  

  因此，如果您想对一组不同的排序表进行样式设置并添加一个不同的类，您可以复制它，向这个类添加第二个

  addClass（'something'）

  调用，这很好，或者更改

  fullbowl

  的CSS以包含您的新属性。有很多选项

更新 有了新的Fiddle，测试就更容易了，而且很容易注意到，您使用的不是JQuery UI的

sortable

API的事件，而是

droppable

中的事件。如果您使用

stop

，从

sortable

，它工作得很好：

$( "#sortable2" ).sortable({
    connectWith: "div",
    stop: function( event, ui ) {
        ui.item.addClass( "fullbowl" )
    }
});

---

您可以在

上看到它的实际运行情况。我已经编辑了问题，正如您所说的什么不起作用；addClass调用？我仍然可以看到我假设的Django模板在那里…：-）在**中对于

drop

事件，没有提到这个

与什么有关。但是第二个参数呃，
ui
，有一个对draggable对象的引用，所以也许可以代替
$（this.addClass（“fullbowl”）…
执行
ui.draggable.addClass（“fullbowl”）…
你可以编辑我当前的代码吗？因为任何东西都不起作用，所以我已经完全删除了它。不可以，但我建议你发布一个JSFIDLE、JSBin、Plunkr、codepen或其他沙盒版本，以显示你遇到的问题。如果人们能够解决这个问题，他们可能会提供帮助。
$( "#sortable2" ).sortable({
    connectWith: "div",
    stop: function( event, ui ) {
        ui.item.addClass( "fullbowl" )
    }
});