0

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

4

1 回答 1

0

我不确定你真正想要什么。但我认为您希望用户可以在放弃答案标志后更改答案。

所以这是我的解决方案

// 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>

您可以通过选择元素的类并设置回调到 drop 函数来将可拖动事件添加到元素

// 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/

于 2013-09-24T09:12:48.433 回答