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

Question

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

请参阅示例

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

JavaScript

indexOfCell = 0;

add boxes to #div element

$('#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));
    }
  });

create placeholder

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

set the placeholder to cell

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

replace two item when drag

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

Answer 1

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

Fiddle Example

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 以更改占位符颜色。