如何使新的可排序元素可嵌套以及如何使元素不消失

时间:2019-05-03 17:57:37

标签: jquery html jquery-ui

.container拖动的新.new不可嵌套。无法将另一个.container / .element放入该目录。如何做到这一点?

新添加的.container / .element的样式元素已添加width:100px; height:30px;。如何仅使用提供的类使它们没有样式标签?

当初始.container掉到.content div之外时消失,它与新的.container一起使用。 (.element div不会发生这种情况)如何使其表现得像.element一样?

.new提供.anchor类,确实使第一个被删除的div没有样式标签,其他所有被删除的div仍然具有样式标签。这不会使它们可嵌套。

<div>
  <div class="new container"> </div>
  <div class="new element"> </div>
</div>
<div class="content anchor">
  <div class="container anchor"> 
    <div class="element anchor"> </div>
    <div class="element anchor"> </div>
  </div>
  <div class="container anchor"> </div>
  <div class="container anchor"> </div>
  <div class="element anchor"> </div>
  <div class="element anchor"> </div>
</div>
body
{
    font-family: Arial, Tahoma, San-Serif;
    font-size: 11px;
}
.content{
  background-color:grey;
  padding:20px;
}
.container{
  background-color:rgba(0,0,255,0.2);
  border:1px solid rgba(0,0,255,0.8);
  padding:5px;
  margin:5px;
  min-width:100px;
  min-height:30px;
}
.element{
  background-color:rgba(0,255,0,0.2);
  border:1px solid rgba(0,255,0,0.8);
  margin:5px;
  min-width:100px;
  min-height:30px;
}
$(function() {
    $('.content').sortable({
        connectWith: '.anchor',
        revert:true
    });
    $('.container').sortable({
        connectWith: '.anchor',
        revert:true
    });
    $( ".container, .content" ).disableSelection();

    $( ".new" ).draggable({
      connectToSortable: ".anchor",
      helper: "clone",
      revert: "invalid"
    });
});

jsfiddle中的代码: https://jsfiddle.net/Kerubis/zumhs0ng/

0 个答案:

没有答案