javascript - Dragable jquery, limit destination by type -
i've got way achieving i'm after in codepen codepen.io/c7borg/pen/zogmdb
i'm stuck on conditional drop.
i need limit items allowed in each container type instance hot items allowed in 'hot things' container, items allowed in 'anything' container
any appreciated
here functions:
$(function(){ var myarguments = {}; function assembledata(object,arguments) { var data = $(object).sortable('toarray'); // array data var step_id = $(object).attr("id"); // step_id , use property name var arraylength = data.length; // no need explain /* create step_id property if not exist */ if(!arguments.hasownproperty(step_id)) { arguments[step_id] = new array(); } /* loop through items */ (var = 0; < arraylength; i++) { var image_id = data[i]; /* push image_id onto property step_id (which array) */ arguments[step_id].push(image_id); } return arguments; } /* sort images */ $('.step').sortable({ connectwith: '.step', items : ':not(.title)', /* that's fired first */ start : function( event, ui ) { myarguments = {}; /* reset array*/ }, /* that's fired second */ remove : function( event, ui ) { /* array of items in list removed item */ myarguments = assembledata(this,myarguments); }, /* that's fired thrird */ receive : function( event, ui ) { /* array of items added new item */ myarguments = assembledata(this,myarguments); }, update: function(e,ui) { if (this === ui.item.parent()[0]) { /* in case change occures in same container */ if (ui.sender == null) { myarguments = assembledata(this,myarguments); } } }, /* that's fired last */ stop : function( event, ui ) { /* send json server */ $("#result").html("send json server:<pre>"+json.stringify(myarguments)+"</pre>"); $('.step').each(function(){ var $this = $(this); $this.css('bordercolor','gray'); $this.sortable('enable'); }); }, }); }); //this function limits number of items in each container 1 (i want 'anything' contain not affected - can put things back) $('.step div').mousedown(function(){ // check number of elements in each sortable $('.limit').not($(this).parent()).each(function(){ var $this = $(this); if($this.find('div').length >= 1) { $this.css('bordercolor','red'); $this.sortable('disable'); } else { $this.css('bordercolor','gray'); $this.sortable('enable'); } }); })
Comments
Post a Comment