如何更改占位符，就像元素相互替换一样

How do I change the placeholder like as the elements replace each other place?

本文关键字：替换 一样 占位符 何更改 元素      更新时间：2023-09-26

如何更改占位符，就像元素相互替换一样。

请看示例

https://jsfiddle.net/98h31o9v/11/

JavaScript 

indexOfCell = 0;

向 #div 元素添加框

$('#add_box').on('click', function() {
  var cell = $("<div></div>");
  var elementObj = cell.get(0);
  $('#div').append(elementObj);
  cell.addClass('content-box').attr('id', 'box_' + indexOfCell);
  cell.text(indexOfCell);
  indexOfCell += 1;
  console.log(elementObj);
  $(cell).draggable({
    helper: 'original',
    zIndex: 10001,
    start: function(event, ui) {
      if ($(this).data('placeholder') === undefined) {
        $(this).data('placeholder', createPlaceholder($(this)));
      }
      setPlaceHolder($(this).data('placeholder'), $(this));
      $(this).after($(this).data('placeholder'));
    },
    stop: function(event, ui) {
      $(this).css('left', $(this).data('placeholder').css('left'));
      $(this).css('top', $(this).data('placeholder').css('top'));
      $(this).data('placeholder').after($(this));
      $(this).data('placeholder').detach();
    }
  });
  $(cell).droppable({
    tolerance: 'intersect',
    greedy: true,
    over: function(event, ui) {
      replaceTwoItem(ui.draggable.data('placeholder'), $(this));
    }
  });

创建占位符

  function createPlaceholder(that) {
    var className = that.attr('class');
    var placeholder = $(document.createElement(that.get(0).nodeName))
      .addClass(className || className + " ui-sortable-placeholder")
      .removeClass("ui-sortable-helper").css({
        background: 'yellow',
        border: '1px solid grey'
      });
    return placeholder;
  }

将占位符设置为单元格

  function setPlaceHolder(placeholder, cell) {
    placeholder.css('width', cell.width());
    placeholder.css('height', cell.height());
    placeholder.css("display", 'block');
    placeholder.css('position', 'absolute');
    placeholder.css('top', cell.css('top'));
    placeholder.css('left', cell.css('left'));
  }

拖动时替换两个项目

  function replaceTwoItem(itemFrom, itemTo) {
    var itemToInsert;
    var action;
    if (itemFrom.index() === 0) {
      itemToInsert = itemFrom.parent();
      action = "prepend";
    } else {
      itemToInsert = itemFrom.prev();
      action = "after";
    }
    itemTo.before(itemFrom);
    if (itemTo.get(0) != itemToInsert.get(0)) {
      if (action == 'prepend') {
        itemToInsert.prepend(itemTo);
      } else if (action == 'after') {
        itemToInsert.after(itemTo);
      }
    }
  }
});

.HTML

<button id="add_box">AddBox</button>
<div id="div">
</div>

.CSS

.content-box {
    width: 100px;
    height: 100px;
    background: green;
    margin: 5px;
    float: left;
}

在评论中简要讨论了您的要求之后，我认为您可以摆脱当前使用的大部分代码。jquery 上的示例UI网站可以稍微调整以获得您想要的内容。

小提琴示例

.HTML： 

<button id="add_box">AddBox</button>
<div id="sortable" class="ui-sortable">
</div>

JQuery：

$('#add_box').on('click', function() {
  //Determine the existing child count.
  var boxCount = $('#sortable').children().length;
  //Create a new "box" and add it to the end of the list.
  var newBox = $('<div class="ui-state-default">' + boxCount + '</div>');
  $('#sortable').append(newBox);
  //Invoke the sortable function to ensure the appropriate events are bound.
  $("#sortable").sortable({
    placeholder: "ui-state-highlight"
  }); 
});

.CSS：

下面可以稍微清理一下。

#sortable { 
  margin: 0; 
  padding: 0; 
}
.ui-state-highlight { 
  background: yellow; 
  margin: 0 5px 5px 5px; 
  color: black;
  float: left;
  width: 100px;
  height: 100px;
}
.ui-state-default { 
  background: green; 
  margin: 0 5px 5px 5px; 
  color: black;
  float: left;
  width: 100px;
  height: 100px;
}

更新.ui-state-default以更改初始颜色，更新.ui-state-highlight以更改占位符颜色。

相关文章：