Revert statements in Adobe Edge
hi,
i have solved part of animation allows 1 draggable element in droppable area @ 1 time. applying draggable elements now. however, i'm having kind of problem right now.
i can drag elements around. now, can drop 1 element in whole droppable areas. rest of elements revert it's original position without dropping in first.
i have placed reset button on stage don't know why won't appear eventhough have tried changing it's position on "elements" column.
this file far, link: https://www.box.com/s/5a0dsq29upy2wtatxmyb
this excerpt of code can work 1st draggable element.
yepnope(
{
nope:[
'js/jquery-ui-1.9.2.custom.min.js',
'js/jquery.ui.touch-punch.min.js',
'css/jquery-ui-1.9.2.custom.min.css'
],
complete: init
}
);
function init() {
var stage = sym.$("stage");
var animalarray = new array();
//draggable. case1, _2
var _2 = sym.$("_2");
_2.css("position", "absolute");
_2.draggable({ disabled: false });
_2.draggable({ containment: stage });
_2.draggable({
snap: '.target1',
snapmode: 'centre',
//revert part 1
revert: "invalid",
stop: function() {
$(this).draggable('option', 'revert', 'invalid');
}
});
animalarray.push(_2);
//droppable
var position1 = sym.$("position1");
position1.css("position", "absolute");
position1.droppable({
//revert part 2
greedy: true,
accept: ".allcases",
drop: function(event, ui) {
//console.log(ui['draggable'].eq(0).attr('id'));
//revert part 3
if($('.filled').length<1){
var draggedelement = ui['draggable'].eq(0).attr('id').replace("stage_", "")
//console.log(draggedelement)
//for loop
for(var i=0 ; i<animalarray.length;i++){
var element = animalarray[i].attr('id').replace("stage_", "")
if(draggedelement == element){
//change animals width , height upon dropped on here
animalarray[i].css('width','75px');
animalarray[i].css('height','75px');
//revert part 4
$(this).append('<div class="filled" ></div>')
}
}
}else{
ui.draggable.draggable('option', 'revert', true);
}
}
});
//---------------------------------------------------------------------------------------- ----------------
//and these codes don't work
//draggable. case2, _5, position2
var _5 = sym.$("_5");
_5.css("position", "absolute");
_5.draggable({ disabled: false });
_5.draggable({ containment: stage });
_5.draggable({
snap: '.target2',
snapmode: 'centre',
//revert part 1
revert: "invalid",
stop: function() {
$(this).draggable('option', 'revert', 'invalid');
}
});
animalarray.push(_5);
//droppable
var position2 = sym.$("position2");
position2.css("position", "absolute");
//drop position2
position2.droppable({
//revert part 2
greedy: true,
accept: ".allcases",
drop: function(event, ui) {
//revert part 3
//edit length?
//orig: if($('.filled').length<1){
//if($('.filled').length<6){ //other elements still stacked on top of it.
//if($('.filled').length<10){ //other elements still stacked on top of it. im able drop e 1st element
if($('.filled').length<50){
var draggedelement = ui['draggable'].eq(0).attr('id').replace("stage_", "")
//for loop
for(var i=0 ; i<animalarray.length;i++){
var element = animalarray[i].attr('id').replace("stage_", "")
if(draggedelement == element){
//change animals width , height upon dropped on here
animalarray[i].css('width','75px');
animalarray[i].css('height','75px');
//revert part 4
$(this).append('<div class="filled" ></div>')
}
}
}else{
ui.draggable.draggable('option', 'revert', true);
}
}
});
//end of codes--------------//
//there's more elements of course, download folder link above.
i hope can me. thank
see discussion: post #10.
More discussions in Edge Animate CC
adobe
Comments
Post a Comment