如何像元素替換每個其他地方一樣更改佔位符？

Question

如何隨着元素替換每個其他地方一樣更改佔位符。

請看例子

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

Answer 1

在瞭解您的需求註釋的簡短的討論，我認爲你可以你當前正在使用擺脫大部分的代碼後。 UI網站上的example上的example可以稍微調整以獲得你想要的。

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改變佔位符的顏色。