Question

以下是截图中的方案说明，

从上面提到的图片。布朗框位置被定义为可放置，下面的选项是可拖动的。如果我拖动它，它工作正常。

如果我在已经定义的位置拖动另一个选项，例如重叠

我想要做的是将文字替换为“受尊敬”，已删除的文字“supercious”将返回到下面框中的选项文本。我怎么能这样做。请任何人帮助我摆脱这个问题。以下是我的代码

  <!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery UI Droppable - Default functionality</title> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<style> 
.box1
{
background: #E7AC9F;
height: 20px;
width: 100px;
display: inline-block;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
.di1{
    border: 1px dotted #22BAA0;
    margin: 10px;
    padding: 10px;
    width: 100px;
    border-radius: 4px;
    font-size: 14px;
    cursor: move;
    list-style: none;
    display: inline-block;
}
</style> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> 
$( function() {
$(".box1").sortable();
    $(".box1").disableSelection();

    $(".qitem2").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $(".box1, #qlist2").droppable({
        hoverClass : 'ui-state-highlight',
        accept: ":not(.ui-sortable-helper)",
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();
            $(ui.draggable).removeAttr("style");

        }
    });
    });
</script> 
</head> 
<body> 
<p>The multi-coloured eyes,<div class="box1"></div>and striking facial cuts and curves<div class="box1"></div>  the Siberian Husky as one of the most desirable and breeds <div class="box1"></div>of dogs. Originally from Siberia, they look like replicas of wolves; also, they are challenging to new owners due to their agility and<div class="box1"></div></p>

<div id="qlist2">
    <div class="qitem2 di1">
        Option 1
    </div>
    <div class="qitem2 di1">
       Option 2
    </div>
    <div class="qitem2 di1">
        Option 3
    </div>
    <div class="qitem2 di1">
        Option 4
    </div>
     <div class="qitem2 di1">
        Option 5
    </div>
     <div class="qitem2 di1">
        Option 6
    </div>
     <div class="qitem2 di1">
        Option 6
    </div>
</div>
</body> 
</html>

Answer 1

只需为draggables元素创建一个容器，这样每当第二个元素被放入droppable中时，我们就可以在它的容器中移动第一个元素

HTML：

.state('bleh')
.state('bleh.view1')
.state('bleh.view2')

JS：

 <div id="qlist2">
  <div id = "dragitem1-container" class="drag-container">
  <div id="dragitem1" class="qitem2 di1">
    Option 1
  </div>
</div>

<div id = "dragitem2-container" class="drag-container">
  <div id="dragitem2" class="qitem2 di1">
    Option 2
  </div>
</div>

<div id = "dragitem3-container" class="drag-container">
   <div id="dragitem3" class="qitem2 di1">
       Option 3
   </div>
</div>
</div>

<div class="droppable-element">
</div>

}

makedraggable（）;

$(document).ready(function() {

function makedraggable() {
 $(".qitem2").draggable({
        "revert": "invalid"
 });

我认为这就是你想要的

https://jsfiddle.net/4bL4tfrt/

使用JQuery UI拖放以填充空白

1 个答案: