0

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

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

4

1 回答 1

0

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

.custom-item { 位置：绝对！重要；}

（还有 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>

于 2018-07-20T06:45:02.740 回答