Draggable works dynamic DOM?

[HDM]

Hi I'm Hector, just buy the BusinessGreen membership , sorry I do not speak English .

My question is if the Draggable plugin works with DOM created so dynamic , for the reason that bugs me is setting as follows:

 

Uncaught Cannot tween a null target.

 

Line: 840

From: TweenLite.js

 

Although I get the impression that the error occurs from another line of code in the function _unwrapElement of Draggable.js, as I see it is returning null as value target to line 794 (Draggable.js) where it makes the call to the function before mentioned. Could you tell me if my interpretation is wrong or what is really going on, because yesterday I to debug good part of the day to find that the error.

 

Thanks and regards.

[Jonathan]

Hello HDM, and Welcome to the GreenSock forum!

 

Do you have a code example so we can see your code in context?

 

This way we can see what your code looks like and what element and tweens you are creating that give that error. And how you are setting up GSAP Draggable.

 

Here is a nice video tut on How to create a codepen demo example. this way we can see what you are seeing when you run your code.

 

Thanks!

[HDM]

Hi Jonathan, thanks for your answer, I am unfortunately in the middle of developing a large application and can not give me time to assemble the complete ecenario the codepen example, as you suggest, for now solve it with jQuery Draggable plugin.

 

When you see me in time, will develop the example to upload it, because I think that your plugin is better than jQuery.

 

Thanks and regards.

[GreenSock]

I sure hope we can get you whatever help you need so that you don't have to revert to jQuery UI's Draggable. Not to say it's "bad" or anything, but as you discovered, it's not nearly as performant or full-featured. I was just trying it's auto-scroll feature yesterday and noticed it behaves very differently than our Draggable's (must wiggle your mouse to keep scrolling, it doesn't handle multiple containers, things can collapse when you drag from right to left, etc.) 

 

I suspect that maybe you were just creating your Draggable on an element that didn't exist in the DOM yet - you should just wait to create your Draggable until you've got its target in the DOM. Is there some reason you wouldn't want to do that? 

[HDM]

Hi

 

the DOM element if it exists, is created dynamically, then I refer to the the Draggable plugin, but it seems that did not exist, not if you do lack refresh or something, but when I have time I will put the code in context to see if we find that the error.

 

Thanks for the reply, Greetings

[Diaco]

Hi HDM 

 

just to add to Jack's advice... pls check this out  :

 

See the Pen jEpjRv by MAW (@MAW) on CodePen

[Jonathan]

Hello,

 

Jack got me thinking.. Here is a jQuery plugin that will wait until the selector is ready.  You just include this small kb file size jQuery plugin called waitUntilExists

 

Then use like this:

:

$(selector).waitUntilExists(function);

:

So basically it could work like this with GSAP Draggable .. waiting for the element to be created and ready in the DOM :

 

Working example:

See the Pen gbjNVG by jonathan (@jonathan) on CodePen

:

var myDraggable;

// function creates a GSAP Draggable instance when it runs
function boxIsReady() {

   // create Draggable
   myDraggable = Draggable.create("#box", {
      type:"x,y",
      bounds:"#wrapper",
      edgeResistance:0.5
   });

   console.log("dynamically added element #box is ready");
}

// when element exists run a function
$('#box').waitUntilExists(boxIsReady);


// create #box when button clicked
$(document).on("click", "button", function(){  
  $("#wrapper").append('<div id="box"></div>');  
  return false;
});

:

Resources:

• Draggable Docs - http://greensock.com/docs/#/HTML5/Utilities/Draggable/
• jQuery waitUntilExists plugin - https://gist.github.com/buu700/4200601
• StackOverflow Topic - How to wait until an element exists? - http://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists

I hope this helps!

[HDM]

hello

Sorry for answering so far but yesterday was complicated my day , thank you all for your answers, the solution was the proposal to Jonathan , you were right , the delay pruduce jQuery plugin ( waitUntilExists ) worked ... makes me remember some years ago when programming in ActionScript ... apparently needed this time to be reflected in the document body .

One more time thank you all and especially to Jonathan for his contribution , I hope not give more tin with details and I'm glad I could use your Draggable plugin , which I think is great .

Greetings .