Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
palamudin

Database created elements

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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);
  });
}
 

 

Link to comment
Share on other sites

I wrote that, but it's really hard to tell what's going on without seeing it. After you append the elements in your promise callback, you need to initialize them somehow. It's hard to tell, but it looks like you are running everything inside that callback, and using "this" in some of those functions might be causing an issue. But again, it's hard to tell without seeing it.

 

Here's the original forum topic about that code. Towards the end of the discussion, somebody else was asking about using that code with a database, so that might help you out.

http://greensock.com/forums/topic/11519-dragging-a-draggable-element-out-of-a-scrollable-div/

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×