javascript - jQuery UI Droppable with an item dropped by default (without changing the markup structure) -

javascript - jQuery UI Droppable with an item dropped by default (without changing the markup structure) -

i'm using .draggable() , .droppable() calculate cost of items dropped in container, based on weight , constant defining per gram cost of items.

now i'd have 1 of items dropped within container default, right calculations , possibility drag more/less items on container. positioning should image 1 when reset button pressed , must able drag default item out of container other draggables.

this looks now:

and how want on page load:

i haven't found documentation covering default droppables this, don't know start. i've prepared jsfiddle here: http://jsfiddle.net/gpfmk/ , jsbin improve http://jsbin.com/oxuguc/1/edit

var cost = 0, math = '', items = [], state = 'outside', wprice = 209; function calcprice(math) { cost = 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 }; homecoming !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')); cost = 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); cost = $("#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>

if move code of 1 item droppable div suggested, revertdraggable() , revert: won't work expected.

here's solution simulates item drop first item on document load. difficulty mimic happens during drop:

$(".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')); cost = 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']") } );

here the link jsfiddle.

javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable