Question

嘿伙计们我正在使用Django模板系统和bootstrap进行一个项目，我有一个jquery图像拖放的要求。我对jquery或javascript没有任何了解。到目前为止，我已经实现了图像拖放，但现在我想在drop事件上添加一个类。

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

所以我决定在drop事件上添加一个类，它可以添加style =“position：absolute; property to image。

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

我在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模板可能应该扩展（例如，从View Source）或删除：
```
 {% extends "dashboard.html" %}

 {% block headercontent %}
```
你的代码已经有一个在drop上添加一个类的例子（至少如果我正确地猜测jQuery拖放;这已经很长时间了）。
```
drop: function( event, ui ) {
    $( this )
        .addClass( "fullbowl" )
        ^^^^^^^^^^^^^^^^^^^^^^^^
        .find( "div" )
        .html( "" );
```
所以你可以复制这个，如果它是你要设置样式的另一组sortables并添加一个不同的类，添加第二个addClass('something')调用这个 - 这没关系 - 或者更改CSS让fullbowl包含您的新属性。很多选择。

更新

使用新的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 上看到它。

在图像拼图的drop事件上添加类

1 个答案:

更新