javascript - 使用 .remove() 时防止 jQuery 可拖动元素离开父 DIV？

Question

我有一个 jQuery fiddle使用 jQuery UI 可拖动来演示这个问题。这是 HTML:

<div id="container">
  <div id="components">
    <p>
      Components: Click to add a component.
    </p>
    <div class="component">
      <div class="component-title">
        One
      </div>
    </div>
    <div class="component">
     <div class="component-title">
       Two
     </div>
    </div>
    <div class="component">
      <div class="component-title">
        Three
      </div>
    </div>
  </div>
  <div id="workspace">
    <div id="pdc">

    </div>
  </div>
</div>

这是 CSS:

#workspace {
  padding-top: 20px;
  clear: both;
}

#pdc {
  border: 1px solid #000000;
  border-radius: 5px;
  width: 300px;
  height: 150px;
  position: relative;
}

.component-title {
  cursor: default;
}

#pdc .component-title {
  cursor: move;
}

.component {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
  width: 98px;
  height: 48px;
}

#components .component {
  float: left;
  margin: 0 12px 0 0;
}

#pdc .component {
  cursor: move;
  display: inline-block;
}

.component-delete {
  float: right;
  color: pink;
  margin-right: 5px;
  cursor: pointer;
}

.component-delete:hover {
  color: red;
}

这是 jQuery:

$(document).ready(function() {
    $('.component').click(function(){
    var lastpdccomponent, html = $(this).clone().prepend('<div class="component-delete">X</div>');
        if ($('#pdc').children().length > 0) {
            lastpdccomponent = $('#pdc').children().last();
            $('#pdc').append(html);
            $('#pdc').children().last().position({
                my: "left top", 
                at: "left bottom", 
                of: lastpdccomponent
            });
        } else {
            $('#pdc').append(html);
        }
        $('#pdc .component').draggable({
            containment: '#pdc', 
            scroll: false, 
            grid: [50, 50]
        });
  });
  $('#pdc').on('click', '.component-delete', function() {
    $(this).parent().remove();
  });
});

它的设置是，如果您单击一个组件(一、二或三)，该组件将被克隆并添加到“pdc”div，如下图所示:

如果拖动第二个和第三个组件，使它们与第一个组件位于水平行中:

然后通过单击红色“X”删除第一个组件，其他组件移出容器，如下图所示:

我已经尝试了组件的其他显示选项，例如“inline-block”，它解决了删除水平行组件中的第一个组件的问题，但当垂直行中的第一个组件时引入了一个新问题的组件被删除；在这种情况下，剩余的元素会移至容器的左侧。

当行中的第一个组件被删除时，如何防止其他组件移出容器？

Answer 1

.component 的位置是相对，因此是根据前面的元素计算的。一旦删除第一个，后续位置的计算就不再正确。为了防止这种行为，只需在 css 中的 #pdc .component{ 中添加 position:absolute; 即可使组件位置的计算彼此独立，请参见片段:

更新 我看到当有滚动条时，元素的定位会变得困惑，因此为了解决此问题，请将 collision: 'none' 添加到

$('#pdc').children().last().position({
            my: "left top", 
            at: "left bottom", 
            of: lastpdccomponent,
            collision: 'none'
        });

查看更新的代码片段:

$(document).ready(function() {
	$('.component').click(function(){
  	var lastpdccomponent, html = $(this).clone().prepend('<div class="component-delete">X</div>');
		if ($('#pdc').children().length > 0) {
			lastpdccomponent = $('#pdc').children().last();
			$('#pdc').append(html);
			$('#pdc').children().last().position({
				my: "left top", 
				at: "left bottom", 
				of: lastpdccomponent,
                collision: 'none'
			});
		} else {
			$('#pdc').append(html);
		}
		$('#pdc .component').draggable({
			containment: '#pdc', 
			scroll: false, 
			grid: [50, 50]
		});
  });
  $('#pdc').on('click', '.component-delete', function() {
  	$(this).parent().remove();
  });
});

#workspace {
  padding-top: 20px;
  clear: both;
}

#pdc {
  border: 1px solid #000000;
  border-radius: 5px;
  width: 300px;
  height: 150px;
  position: relative;
}

.component-title {
  cursor: default;
}

#pdc .component-title {
  cursor: move;
}

.component {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
  width: 98px;
  height: 48px;
}

#components .component {
  float: left;
  margin: 0 12px 0 0;
}

#pdc .component {
  cursor: move;
  position:absolute;
}

.component-delete {
  float: right;
  color: pink;
  margin-right: 5px;
  cursor: pointer;
}

.component-delete:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="container">
  <div id="components">
    <p>
      Components: Click to add a component.
    </p>
    <div class="component">
      <div class="component-title">
        One
      </div>
    </div>
    <div class="component">
     <div class="component-title">
        Two
      </div>
    </div>
    <div class="component">
      <div class="component-title">
        Three
      </div>
    </div>
  </div>
  <div id="workspace">
    <div id="pdc">
      
    </div>
  </div>
</div>