Hello there Greenies, i would need some assistance if possible.
Here goes.
Im working on a pack of draggable elements that are dynamically built from sqlite query. Heres my issue.
If elements are manually placed in the project they are all draggable, no issues there but when the screen is populated with database created elements they are not.
I have tried waiting for query to complete and fire draggable events but it wont budge. The only way i made it work is to call the script with each element and that destroyes the logic and performance like theres no tomorrow (thats prolly cause i mangled it like a butcher).
Please have mercy with comments im kinda new around here.
Thanks in advance,
Jim.
CODE:
Im using this draggable script (found on codepen)
var container = $("#clone-container");
var scrollBox = $("#scroll-box");
var dropPanel = $("#drop-panel");
var tiles = $(".tile");
var threshold = "10%";
tiles.each(function() {
var element = $(this);
var wrapper = element.parent();
var offset = element.position();
var scope = {
clone : element.clone().addClass("clone").prependTo(container),
element : element,
wrapper : wrapper,
width : wrapper.outerWidth(),
dropped : false,
moved : false,
get x() { return getPosition(wrapper, offset).x; },
get y() { return getPosition(wrapper, offset).y; }
};
scope.draggable = createDraggable(scope);
element.on("mousedown touchstart", scope, startDraggable);
});
// START DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function startDraggable(event) {
var tile = event.data;
TweenLite.set(tile.element, { autoAlpha: 0 });
TweenLite.set(tile.clone, { x: tile.x, y: tile.y, autoAlpha: 1 });
tile.draggable.startDrag(event.originalEvent);
}
// CREATE DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function createDraggable(tile) {
var clone = tile.clone;
var wrapper = tile.wrapper;
tile.draggable = new Draggable(clone, {
onPress : setActive,
onDrag : collapseSpace,
onRelease : dropTile
});
return tile.draggable;
///////
function setActive() {
TweenLite.to(clone, 0.15, { scale: 1.2, autoAlpha: 1 });
}
function collapseSpace() {
if (!tile.moved) {
if (!this.hitTest(wrapper)) {
tile.moved = true;
TweenLite.to(wrapper, 0.3, { width: 0 });
}
}
}
function dropTile() {
var className = undefined;
if (this.hitTest(dropPanel, threshold) && !tile.dropped) {
dropPanel.append(wrapper);
tile.dropped = true;
className = "+=dropped";
$('#myModal').modal('show');
}
moveBack(tile, className);
}
}
// MOVE BACK :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function moveBack(tile, className) {
var clone = tile.clone;
var element = tile.element;
var wrapper = tile.wrapper;
TweenLite.to(wrapper, 0.2, { width: tile.width });
TweenLite.to(clone, 0, { scale: 1, autoAlpha: 1, x: tile.x, y: tile.y, onComplete: done });
if (className) TweenLite.to([element, clone], 0.3, { className: className });
function done() {
tile.moved = false;
TweenLite.set(clone, { autoAlpha: 0 });
TweenLite.set(element, { autoAlpha: 1 });
}
}
// GET POSITION ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function getPosition(wrapper, offset) {
var position1 = wrapper.offset();
var position2 = container.offset();
return {
x: position1.left - position2.left + offset.left,
y: position1.top - position2.top + offset.top
};
}
And this would be my database query.
function onDeviceReady(){
myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"});
myDB.transaction(function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [],
function(tx, result) {
},
function(error) {
});
});
myDB.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) {
var len = results.rows.length, i;
$("#rowCount").html(len);
for (i = 0; i < len; i++){
$("#tile-container").append(" <div class='tile-wrapper'><div class='tile'>A</div></div>");
}
}, null);
});
}
together they look like this.
function onDeviceReady(){
myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"});
myDB.transaction(function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [],
function(tx, result) {
},
function(error) {
});
});
myDB.transaction(function(transaction) {
transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) {
var len = results.rows.length, i;
$("#rowCount").html(len);
for (i = 0; i < len; i++){
$("#tile-container").append(" <div class='tile-wrapper'><div class='tile'>A</div></div>");
var container = $("#clone-container");
var scrollBox = $("#scroll-box");
var dropPanel = $("#drop-panel");
var tiles = $(".tile");
var threshold = "50%";
tiles.each(function() {
var element = $(this);
var wrapper = element.parent();
var offset = element.position();
var scope = {
clone : element.clone().addClass("clone").prependTo(container),
element : element,
wrapper : wrapper,
width : wrapper.outerWidth(),
dropped : false,
moved : false,
get x() { return getPosition(wrapper, offset).x; },
get y() { return getPosition(wrapper, offset).y; }
};
scope.draggable = createDraggable(scope);
element.on("mousedown touchstart", scope, startDraggable);
});
// START DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function startDraggable(event) {
var tile = event.data;
TweenLite.set(tile.element, { autoAlpha: 0 });
TweenLite.set(tile.clone, { x: tile.x, y: tile.y, autoAlpha: 1 });
tile.draggable.startDrag(event.originalEvent);
}
// CREATE DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function createDraggable(tile) {
var clone = tile.clone;
var wrapper = tile.wrapper;
tile.draggable = new Draggable(clone, {
onPress : setActive,
onDrag : collapseSpace,
onRelease : dropTile
});
return tile.draggable;
///////
function setActive() {
TweenLite.to(clone, 0.15, { scale: 1, autoAlpha: 1 });
}
function collapseSpace() {
if (!tile.moved) {
if (!this.hitTest(wrapper)) {
tile.moved = true;
TweenLite.to(wrapper, 0.3, { width: 0 });
}
}
}
function dropTile() {
var className = undefined;
if (this.hitTest(dropPanel, threshold) && !tile.dropped) {
dropPanel.append(wrapper);
tile.dropped = true;
className = "+=dropped";
$('#myModal').modal('show');
}
moveBack(tile, className);
}
}
// MOVE BACK :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function moveBack(tile, className) {
var clone = tile.clone;
var element = tile.element;
var wrapper = tile.wrapper;
TweenLite.to(wrapper, 0.2, { width: tile.width });
TweenLite.to(clone, 0, { scale: 1, autoAlpha: 1, x: tile.x, y: tile.y, onComplete: done });
if (className) TweenLite.to([element, clone], 0.3, { className: className });
function done() {
tile.moved = false;
TweenLite.set(clone, { autoAlpha: 0 });
TweenLite.set(element, { autoAlpha: 1 });
}
}
// GET POSITION ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
function getPosition(wrapper, offset) {
var position1 = wrapper.offset();
var position2 = container.offset();
return {
x: position1.left - position2.left + offset.left,
y: position1.top - position2.top + offset.top
};
}}
}, null);
});
}
