0

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

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

所以我决定在 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>
4

1 回答 1

1

几点：

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

     {% extends "dashboard.html" %}

 {% block headercontent %}

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

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

    因此，如果它是一组不同的可排序对象，您可以复制它并添加不同的类，添加第二个addClass('something')调用到这个 - 这很好 - 或者更改 CSSfullbowl以包含您的新属性。很多选择。

更新

使用您的新 Fiddle，测试变得更容易，并且很容易注意到您使用的不是 JQuery UI sortableAPI 的事件，而是来自droppable. 如果您使用stop, from sortable，它可以正常工作：

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

您可以在我的 Fiddle 叉子上看到它的实际效果。

于 2014-01-21T12:05:57.300 回答