Question

我尝试制作可拖动的选项，可以在3个不同的框中拖动，然后在框之间移动。当我拖动第一个选项并将其放入框中时，它可以正常工作。但是，当我尝试将被删除的项目由于某种原因移动到另一个框时，它会落后于页面上除了被删除的元素之外的其他元素。我希望它能够在它被丢弃之前以同样的方式工作谁能帮我？ jsfiddle示例：https://jsfiddle.net/cz6kL69c/2/ 我的HTML代码：

<div id="questionContainer">
  <div id="optionContainer">
    <div class="option">
      <label>Option 1</label>
    </div>
    <div class="option" >
      <label>Option 2</label>
    </div>
    <div class="option ">
      <label >Option 3</label>
    </div>
  </div>
  <div id="BoxContainer" style="column-count: 3;">
    <div class="box"><b>Box 1</b></div>
    <div class="box"><b>Box 2</b></div>
    <div class="box"><b>Box 3</b></div>
  </div>
  <div id="answerContainer" style="column-count: 3;">
    <div class="answerBox"></div>
    <div class="answerBox"></div>
    <div class="answerBox"></div>
  </div>
</div>

CSS：

#answerContainer { margin-top:5px;}
#optionContainer { margin:20px 0;}
.dragOver { background-color: lightgreen;}

.box { 
cursor:default; 
margin: 0px 2px 2px 0px; 
text-align:center; 
background-color:green; 
font-size:1em; 
padding:15px 10px; 
}

.answerBox { 
min-height:200px; 
border: solid 1px black; 
margin: 0px 2px 2px 0px;  
padding:5px 5px; 
}

.option { 
width:245px; 
margin: 0px 2px 2px 0px; 
background-color:lightblue; 
font-size:1em;  
padding:10px 10px; 
}

JS

$(document).ready( function() 
{
    $(".option").draggable({
        revert: "invalid"
    }); 
    $(".answerBox").droppable({
        hoverClass: "dragOver",
        drop: function(event, ui) {
            $(ui.draggable).css({'left':'0', 'top':'0'});
            var item = $(ui.draggable);
            if (!item.hasClass('copy'))
            {
                item = item.clone().addClass('copy');
                item.draggable({
                    revert: "invalid"
                }); 
            }
            $(this).append(item);
        }
    });
});

Answer 1

$(document).ready( function() 
{
  $(".option").draggable({
    revert: "invalid"
  });   
  $(".answerBox").droppable({
      hoverClass: "dragOver",
      drop: function(event, ui) {
        $(ui.draggable).css({'left':'0', 'top':'0'});
        var item = $(ui.draggable);
        if (!item.hasClass('copy'))
        {
          item = item.clone().addClass('copy');
          item.draggable({
            revert: "invalid",
            start: function(event, ui) { 
              item.hide();
            },
            stop: function(event, ui) {
              item.show();
            },
            helper: "clone"
        }); 
        }
        $(this).append(item);
      }
    });
});

固定

jQuery UI draggable落后于其他元素

1 个答案: