拖放进行填空使用JQuery UI

从上述picture.Brown框中的位置被定义为可放开和下面的选择是可拖动如果我拖放它工作正常。

如果我拖在已定义的地方另一种选择其重叠例如

我想要做的是它将替换文本为“崇敬”，并已经下降文本“超级“将回到下面的框中的选择文本。我该怎么做。请任何人都帮我解决这个问题。下面是我的代码

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

来源

2017-01-02 Kavya Shree

我明白您的问题是...你想，如果在下拉槽落单拖元素....有已经有一个可拖动的区域出现在下降槽中，那么另一个拖动元素不应该被允许放入该下拉槽中......你想要这个吗？ – Kenny

ü得到了差不多。如果我试图在已经下降的地方下降，它会下降，并已出现下降将移动到选择列表下方。再次阅读您将了解 –

@KavyaShree我想前几天你有解决方案，现在发生什么？ – aavrug

，很快让拖拽元素元素的容器，这样，每当第二个元素在投掷的掉落在它的容器

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 ：

$(document).ready(function() { 

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

}

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(); 

    } 
}) 
})

我想这是你想要的

https://jsfiddle.net/4bL4tfrt/

来源

2017-01-02 11:14:33 Kenny

最好的办法做到这一点......使拖放的容器为可拖放....因此，每当用户拖放容器中的可拖动元素启用拖放....如果这不是所需的答案向我们展示我们可以尝试的小提琴 – Kenny

如果我这样做，它不会允许其他选项放弃。我不想让这样做它将取代新的drop和旧的可拖动文本将再次移动到option.as下面提到的选项 –

再次阅读我的问题@kenny –

拖放进行填空使用JQuery UI

回答

相关问题