默認情況下丟棄項目的jQuery UI（不改變標記結構）

Question

我使用.draggable()和.droppable()來計算容器中丟棄的項目的價格，基於權重和定義每個項目的常量克所有項目的價格。

現在我想讓其中一個物品在默認情況下丟棄在容器中，並且有正確的計算以及將更多/更少物品拖放到容器上的可能性。按下重置按鈕時，定位應該與圖像1相似，我必須能夠像其他可拖動一樣將默認項目拖出容器。

這是它看起來像現在：

這是我多麼希望它看起來像在頁面加載：

我還沒有發現任何覆蓋文件像這樣的默認droppables，所以我真的不知道從哪裏開始。我已經準備了的jsfiddle這裏：http://jsfiddle.net/gPFMk/和Jsbin對於那些誰更喜歡它http://jsbin.com/oxuguc/1/edit

var price = 0, math = '', items = [], state = 'outside', wprice = 209; 


function calcPrice(math) { 
    price = 0; 
    weight = 0; 
    $('.counter-number').remove(); 
    addticker(0); 
    console.log("Item array: " + items); 
    $.each(items, function(key, value) { 
    price+= parseInt($(".draggable[data-item='" + value + "']").attr('id')); 
    weight+= $(".draggable[data-item='" + value + "']").data('weight'); 
    loadticker(price); 
    }); 
    $('#weight').html('<span>weight </span>' + weight + ' g'); 
} 

function revertDraggable($selector) { 
    $selector.each(function() { 
    var $this = $(this), 
     position = $this.data("originalPosition"); 
     if (position) { 
     $this.animate({ 
      left: position.left, 
      top: position.top 
     }, 500, function() { 
      $this.data("originalPosition", null); 
     }); 
     } 
    items = []; 
    $('#droppable').removeClass('active'); 
    $('.counter-number').remove(); 
    calcPrice(); 
    }); 
} 

$(function() { 
    $.each($('.draggable'), function() { 
    var $this = $(this), 
    weight = $this.data('weight'); 
    $this.attr('id', weight*wprice); 
    }); 

    $(".draggable").draggable({ 
    revert: function (event, ui) { 
     $(this).data("draggable").originalPosition = { 
     top: 0, 
     left: 0 
     }; 
     return !event; 
    }, 
    cursor: "move", 
    cursorAt: { 
     top: 56, 
     left: 56 
    }, 
    stack: "div", 
    containment: "#container", 
    scroll: false 
    }); 

    $("#droppable").droppable({ 
    drop: function(e, u) { 
     $(this).addClass('active'); 
     if ($.inArray(u.draggable.data('item'), items) == -1) { 
     items.push(u.draggable.data('item')); 
     price = 0; 
     weight = 0; 
     calcPrice('add'); 
     u.draggable.data('state', 'inside'); 
     } 
     if (!u.draggable.data("originalPosition")) { 
     u.draggable.data("originalPosition", 
     u.draggable.data("draggable").originalPosition); 
     } 
    }, 
    over: function() { 
     $(this).addClass('active'); 
    }, 
    out: function(e, u) { 
     if(u.draggable.data('state') == 'inside') { 
     u.draggable.data('state', 'outside'); 
     var itemIndex = $.inArray(u.draggable.data('item'), items); 
     items.splice(itemIndex, 1); 
     price = $("#droppable").text(); 
     calcPrice('remove'); 
     } 
     if (items.length === 0) 
     $('#droppable').removeClass('active'); 
    } 
    }); 
    $('#container').on('click', '#reset', function() { 
    revertDraggable($(".draggable")); 
    }); 
}); 

 

<div id="container"> 
    <div id="heft"> 
     <div id="info"> 
      <div id="price"> 
      <span>price</span> 
      <div class="counter-wrap"> 
       <div class="counter-number"> 
        &nbsp; 
       </div> 
      </div>€ 
      </div> 
      <div id="weight"> 
      <span>weight</span> 
      0 g 
      </div> 
      <button id="reset">Reset</button> 
     </div> 
     <div id="droppable"></div> 
     </div> 
     <div id="items"> 
     <div class="draggable" data-item="3" data-weight="15" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div> 
     <div class="draggable" data-item="2" data-weight="35" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div> 
     <div class="draggable" data-item="1" data-weight="8" data-state="outside"><img src="http://wemakeawesomesh.it/nyancat/nyan.gif" width="90" height="90"></div> 
     </div> 
    </div> 

如果我一個項目的代碼移到可放開格狀建議，revertDraggable()和revert:將無法​​按預期方式工作。

Answer 1

下面是一個解決方案，它模擬文檔加載中第一個項目的項目放置。 難度是模仿下降期間會發生什麼：

$(".draggable[data-item='1']").attr(
    "style", 
    "position: relative; z-index: 10; left: 300px; top: 30px" 
); 

var onDrop = function(e,u) { 
    if ($.inArray(u.draggable.data('item'), items) == -1) { 
     items.push(u.draggable.data('item')); 
     price = 0; 
     weight = 0; 
     calcPrice('add'); 
     u.draggable.data('state', 'inside'); 
    } 
    if (!u.draggable.data("originalPosition")) { 
     u.draggable.data("originalPosition", 
     u.draggable.data("draggable").originalPosition); 
    } 
}; 

onDrop.call($("#droppable"), 
    {},{ draggable: $(".draggable[data-item='1']") } 
); 

這裏是the link to the jsfiddle。