JQuery 动态 resizable/draggable - 使元素相互忽略

Question

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

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>

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>

JQuery 动态 resizable/draggable - 使元素相互忽略

JQuery dynamic resizable/draggable - make elements ignore each other

jquery

jquery-ui-draggable

jquery-ui-resizable