Javascript 当元素相互替换时，如何更改占位符？

当元素相互替换时，如何更改占位符

请看这个例子

JavaScript

indexOfCell = 0;

向#div元素添加框

将占位符设置为单元格

拖动时替换两个项目

HTML

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

</div>

---

在评论中对您的需求进行了简短的讨论之后，我认为您可以去掉当前使用的大部分代码。jquery上的 用户界面网站可以稍微调整，以得到你想要的

HTML:

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

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

---

更新

.ui state default

以更改初始颜色，更新

.ui state highlight

以更改占位符颜色。

在有关您的需求的评论中进行简短讨论后，我认为您可以删除当前使用的大多数代码。jquery上的 用户界面网站可以稍微调整，以得到你想要的

HTML:

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

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

---

更新

.ui state default

以更改初始颜色，更新

.ui state highlight

以更改占位符颜色。

不确定您要问什么？您所说的“在元素相互替换时更改占位符”的确切含义是什么？是否要更改移动项目的颜色或其他内容？我想更改可拖动项目占位符颜色目前，只有第一个项目具有可见占位符。您想更改第一项的黄色背景吗？我想如下创建：在

createPlaceholder

方法中，将

background

设置为

none

不确定您要问什么？您所说的“在元素相互替换时更改占位符”的确切含义是什么？是否要更改移动项目的颜色或其他内容？我想更改可拖动项目占位符颜色目前，只有第一个项目具有可见占位符。您想更改第一项的黄色背景吗？我想如下创建：在

createPlaceholder

方法中，将

background

设置为

none

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

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

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

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