使用JQuery UI拖放以填充空白

Below is my scenario explanation in screenshot,

以下是截图中我的情景说明，

From the above mentioned picture.Brown box positions are defined as droppable and the below choices are draggable.If I drag drop it is working fine.

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

If I drag another option in already defined place its overlapping for example

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

What I want to do is it will replace text as "venerated" and already dropped text "supercious" will come back to the text of choices in below box.How can I do this .Please anyone help me to get out of this issue. Below is my code

我想要做的是它将文本替换为“受尊敬”，已经删除的文本“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>

1 个解决方案

#1

Just make an container for draggables elements so that whenever second element is dropped in droppable we can move first element in it's container

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

HTML :

HTML：

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

JS:

JS：

$(document).ready(function() {

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

}

makedraggable();

makedraggable（）;

 $(".droppable-element").droppable({
    "accept": ".qitem2",
    "drop": function(event, ui) {
        if ($(this).find(".qitem2").length) {
            var $presentChild = $(this).find(".qitem2"),
                currChildId = $presentChild.attr("id"),
                $currChildContainer = $("#" + currChildId + "-container");                  
           $currChildContainer.append($presentChild);
           $presentChild.removeAttr("style");
           makedraggable();
        }

        $(ui.draggable).clone().appendTo(this).removeAttr("style");
        $(ui.draggable).remove();

    }
 })
})

I think this is what you want

我想这就是你想要的

https://jsfiddle.net/4bL4tfrt/

#1