一次又一次地将一个 div 拖放到下一个 div答案

【问题标题】：Drag and drop the one div again and again to the next divs一次又一次地将一个 div 拖放到下一个 div
【发布时间】：2013-09-28 07:53:08
【问题描述】：

我的 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 中。所以请给出一个完美的解决方案。谢谢

【问题讨论】：

再次检查您的 HTML。我觉得你搞错了

勾选请给出解决方案。

标签： javascript jquery html drag-and-drop

【解决方案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/

【讨论】：