javascript - 为图像拼图添加放置事件类

Question

大家好，我在一个元素中使用 Django 模板系统和 Bootstrap ，我需要 jquery 图像拖放功能。我对 jquery 或 javascript 没有任何了解。 到目前为止，我已经实现了图像拖放，但现在我想在拖放事件上添加一个类。

在我的要求中，我将一张图片剪成五 block 。每件都存放在一个容器中。用户可以拖动一 block 将其放入另一个容器中以完成图像。但是当我将它放到另一个容器中时，所有图像都垂直对齐，而不是连接到前一 block 。

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

我希望你已经理解我的问题。我知道这是一个小问题，但请帮助我们编写代码

我已经在 jsfiddle 上添加了它 http://jsfiddle.net/binit/JnYB9/这样你就可以帮我玩了

代码

---

<script>
$(function() {

$( "#sortable1" ).sortable({
connectWith: "div"
});

$( "#sortable2" ).sortable({
connectWith: "div"

 });

$( "#sortable1, #sortable2" ).disableSelection();
 });
</script>

{% endblock headercontent %}


{% block content %}

<div class="row-fluid" >
    <div class="span4">
        <div class="span1"></div>
        <div id="sortable1" class="well sidebar-nav sidebar-nav-fixed span11">
            <legend>Collect Coupon parts</legend>
            1st part
            <img class="ui-state-highlight" src="{% static 'images/demo/north.png' %}" >
            2nd part
            <img class="ui-state-highlight" src="{% static 'images/demo/south.png' %}" >
            3rd part
            <img class="ui-state-highlight" src="{% static 'images/demo/east.png' %}" >
            4th part
            <img class="ui-state-highlight" src="{% static 'images/demo/west.png' %}" >
            5th part
            <img class="ui-state-highlight" src="{% static 'images/demo/center.png' %}"  >
        </div>
    </div>
    <div id="sortable2" class=" well sidebar-nav sidebar-nav-fixed span8">

        <legend>Canvas section</legend>
     </div>
</div>

Answer 1

几点:

• 当您询问客户端 Javascript 问题时，最好不要用服务器端标记混淆水域。因此，像这样的非 HTML 模板可能应该扩展(例如，从查看源代码)或删除:

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

• 您的代码中已经有一个在这个 block 中添加拖放类的示例(至少如果我对 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" )
    }
});

您可以在 my fork of your Fiddle 上看到它的运行情况.