jQuery动态可调整大小/可拖动-使元素彼此忽略

Question

单击“创建新项”时，我希望元素仅出现在同一位置，而不存在其他项时向下移动。拖动项目时（使用左上角），它们不会互相影响-很好。删除或调整项目大小时，它们可能会影响其他元素的位置。我希望他们不要互相影响。

Exception in thread "main" java.lang.NoSuchMethodError: org.springframework.boot.SpringApplication.run(Ljava/lang/Class;[Ljava/lang/String;)Lorg/springframework/context/ConfigurableApplicationContext;
    at com.dell.cns.services.esb.heartbeat.satcps.CnsServicesHeartBeatSatcpsApplication.main(CnsServicesHeartBeatSatcpsApplication.java:12)

var currentMaxItemNum = 0;
function putElemOnTop($elem) {
	maxZindex = 1000;
	$('.custom-item').each(function(){
		var zIndex = $(this).css('zIndex');
		if (zIndex != 'auto' && zIndex > maxZindex) {
			maxZindex = zIndex;
		}
	});
	if ($elem.css('zIndex') == 'auto' || $elem.css('zIndex') < maxZindex) {
		$elem.css('zIndex', parseInt(maxZindex) + 1);
	}
}
function createItem() {
	$elem = getItemElem();
	setupDragResize($elem);
	$('#container').append($elem);
}
function randomColor() {
	return Math.floor(Math.random()*16777215).toString(16);
}
function getItemElem() {
	currentMaxItemNum++;
	var $elem = $('<div item-num="'+currentMaxItemNum+'" class="custom-item" '
			+ 'style="background:#'+randomColor()+'">'
			+ '<span class="move">&harr;</span>'
			+ '<span class="delete">&#10007;</span>'
			+ '<span class="label">Item #'+currentMaxItemNum+'</span>'
			+ '</div>');
	return $elem;
}
function setupDragResize($elem) {
	$elem
		.draggable(
			{
				handle: ".move",
				containment: "#container",
				grid: [50, 50]
			}
		)
		.resizable(
			{
				containment: "#container",
				grid: 50
			}
		);
}
$(function(){
	$('#create-item').click(function(){
		createItem();
	});
	$(document).on('mousedown', '.custom-item', function(){
		putElemOnTop($(this));
	});
	$(document).on('click', '.delete', function(){
		if (confirm('Are you sure you want to delete this item?')) {
			$(this).closest('.custom-item').remove();
		}
	});	
});

#container { width: 300px; height: 450px; background:#eee;}
.custom-item { display:block; position:absolute; width: 100px; height: 100px;text-shadow:1px 1px 2px white;}
.custom-item, #container { padding: 0; margin: 0; }
.move {cursor: move;}
.delete {display:block;float:right;cursor:pointer;}
.label {text-align:center;display:block;}

Answer 1

我通过添加“！important”解决了问题：

.custom-item {position：absolute！important; }

（以及putElemOnTop（$ elem）在createItem（）的末尾，因此新项位于顶部）

var currentMaxItemNum = 0;
function putElemOnTop($elem) {
	maxZindex = 1000;
	$('.custom-item').each(function(){
		var zIndex = $(this).css('zIndex');
		if (zIndex != 'auto' && zIndex > maxZindex) {
			maxZindex = zIndex;
		}
	});
	if ($elem.css('zIndex') == 'auto' || $elem.css('zIndex') < maxZindex) {
		$elem.css('zIndex', parseInt(maxZindex) + 1);
	}
}
function createItem() {
	$elem = getItemElem();
	setupDragResize($elem);
	$('#container').append($elem);
	putElemOnTop($elem);
}
function randomColor() {
	return Math.floor(Math.random()*16777215).toString(16);
}
function getItemElem() {
	currentMaxItemNum++;
	var $elem = $('<div item-num="'+currentMaxItemNum+'" class="custom-item" '
			+ 'style="background:#'+randomColor()+'">'
			+ '<span class="move">&harr;</span>'
			+ '<span class="delete">&#10007;</span>'
			+ '<span class="label">Item #'+currentMaxItemNum+'</span>'
			+ '</div>');
	return $elem;
}
function setupDragResize($elem) {
	$elem
		.draggable(
			{
				handle: ".move",
				containment: "#container",
				grid: [50, 50]
			}
		)
		.resizable(
			{
				containment: "#container",
				grid: 50
			}
		);
}
$(function(){
	$('#create-item').click(function(){
		createItem();
	});
	$(document).on('mousedown', '.custom-item', function(){
		putElemOnTop($(this));
	});
	$(document).on('click', '.delete', function(){
		if (confirm('Are you sure you want to delete this item?')) {
			$(this).closest('.custom-item').remove();
		}
	});	
});

#container { width: 300px; height: 450px; background:#eee;}
.custom-item { display:block; position:absolute !important; width: 100px; height: 100px;text-shadow:1px 1px 2px white;}
.custom-item, #container { padding: 0; margin: 0; }
.move {cursor: move;}
.delete {display:block;float:right;cursor:pointer;}
.label {text-align:center;display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button id="create-item">Create New Item</button>
<div id="container"></div>