Question

我的HTML文件是

<div id="dragAnwr" ></div>  
            <div id="dropimg" > </div>
              <div id="dropAnswr1" class="dropbox" ></div>
              <div id="dropAnswr2" class="dropbox" ></div>
              <div id="dropAnswr3" class="dropbox" ></div>
              <div id="dropAnswr4" class="dropbox" ></div>

和我的jQuery文件是

$( "#dragAnwr" ).draggable({ revert: "invalid",cursor: 'move',containment: "parent", });
    $( "#dropAnswr1" ).add( "#dropAnswr2").add( "#dropAnswr3").add( "#dropAnswr3").add( "#dropAnswr4").droppable({

    drop: function( event, ui ) {

         hoverClass: "drop-hover"
      }

    });

在这里，我想将dragAnwr Div拖到以下Div中

<div id="dropAnswr1" class="dropbox" ></div>
                  <div id="dropAnswr2" class="dropbox" ></div>
                  <div id="dropAnswr3" class="dropbox" ></div>
                  <div id="dropAnswr4" class="dropbox" ></div>

使用我的jQuery代码只有一次dragAnwr div掉入任何其他div。在这里，我想将dragAnwr div一次又一次地拖放到下一个div。所以请提供完美的解决方案。谢谢

Answer 1

我不确定你真正想要的是什么。但我认为你希望用户在删除答案标志后可能会改变答案。

所以这是我的解决方案

// HTML
<div id="dragAnwr" >'   ' is Answer </div>
<div id="dropAnswr1" class="dropbox" >A</div>
<div id="dropAnswr2" class="dropbox" >B</div>
<div id="dropAnswr3" class="dropbox" >C</div>
<div id="dropAnswr4" class="dropbox" >D</div>

您可以通过选择其类来将可拖动事件添加到元素，并将回调设置为删除函数

// js
$( "#dragAnwr" ).draggable({ 
    revert: "invalid",
    cursor: 'move',
    containment: "parent" 
});

$( ".dropbox" ).droppable({
    drop: function( event, ui ) {
        // remove flag class
        $(this).siblings().removeClass('selected');
        // add class to the dropped element
        $(this).addClass('selected');
    },
    hoverClass: "drop-hover"
});

一些CSS获取更多信息

// css
div {
   border-style:solid;
   border-width:5px;
}
.selected {
   color: red;
}

希望这有帮助！你可以看看它的小提琴http://jsfiddle.net/DKUg9/5/

将一个div再次拖放到下一个div

1 个答案: