Jump to content
GreenSock

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

Basic and full sample please...No Codepen

Recommended Posts

Hi,

 

Spend hours to make codepen Draggable sample works. Copied and pasted Codepen codes into a directory and ran index.html. No way ! What's missing ? Thx !

Having completed html file with starting and ending tags <head> ..<script>,included required .min files through CDN as recommended.... Nothing

Just a not rounded red rectangle (no hand icon as in sample...)

Already fed up...

 

 

Link to comment
Share on other sites

It would be helpful if you can could demonstrate something not working in CodePen.

  • Like 2
Link to comment
Share on other sites

Any errors in the console? Are you loading your custom JS after gsap and draggable?

  • Like 2
Link to comment
Share on other sites

This was about as basic as I could make it.

Perhaps it will help you see where your issue is hiding.

 

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js">
gsap.registerPlugin(Draggable);
</script>
<style>
#box {
    height: 75px;
    width: 150px;
    background-color: #ff0000;
    }
</style>
</head>  

<body>
<div id="box"></div>
<script>    
Draggable.create("#box", {});
</script> 
</body>
</html>

 

  • Like 1
Link to comment
Share on other sites

Thank you all.

My attempt as I said was just to copy/paste locally into a new folder, all 3 codepen files related to Draggable sample. I named them  index.html, stylesheet.css and  index.js .

As the html file was truncated, I added the starting and ending missing parts (from !DOCTYPE to </html>) and placed into head section  all required CDN files (gsap.min.js, Draggable.min.js  plus my local InertiaPlugin.min.js which seems to be required.

The body section is exactly what Codepen gave me; no change.

 

Then I run this sample expecting to get the shown result (mean... two rounded rectangle on a grid,  draggable with mouse !!! Am I wrong ?!?!? )

 

But instead I get no grid, just a red round square in top left of my local page tagged "Drag and throw me too". That'a all ! 

A mouse over it does not show any hand icon as on codepen sample. It seems that something is missing to activate GSAP......or whatever else...

 

As a beginner it's really frustrating to loose so much time for such a basic training: just trying to reproduce a sample !!!Come on !

 

@Greg: I am studying your code sample to unfreeze my mind

 

Link to comment
Share on other sites

-----------------------------------------------------------------index.html file-----------------------------------------------------
<!DOCTYPE html>
<html>
    <head>
     
        <!-- <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script> -->
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script>
        <!-- <script type ="text/javascript">src="lib/gsap/Draggable.min.js"</script> -->
        <script type ="text/javascript">src="InertiaPlugin.min.js"</script>
        <script type ="text/javascript" src="index.js"></script>
 
        <link rel="stylesheet"type="text/css" href="stylesheet.css" media="screen"/>
        <link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'> 
    </head>
    
    <body>
        <div id="container">
                <div class="box" id="box1">Drag and throw me</div>
                <div class="box" id="box2" style="background-color:red;">Drag and throw me too</div>
        </div>
        <div class="controls">
            <ul>
                <li class="controlsTitle">Options</li>
                <li>
                <label><input type="checkbox" name="snap" id="snap" value="1" /> Snap end position to grid</label>
                </li>
                <li>
                <label><input type="checkbox" name="liveSnap" id="liveSnap" value="1" /> Live snap</label>
                </li>
            </ul>
        </div>
    </body>
</html>      
 
-----------------------------------------------------------------index.js file-----------------------------------------------------
 
/*
See https://greensock.com/draggable/ for details. 
This demo uses InertiaPlugin which is a membership benefit of Club GreenSock, https://greensock.com/club/
*/
gsap.registerPlugin(InertiaPlugin);
 
var $snap = $("#snap"),
  $liveSnap = $("#liveSnap"),
    $container = $("#container"),
    gridWidth = $("body").width() / 5,
    gridHeight = 100,
    gridRows = 6,
    gridColumns = 5,
    ixy;
 
//loop through and create the grid (a div for each cell). Feel free to tweak the variables above
for (i = 0i < gridRows * gridColumnsi++) {
    y = Math.floor(i / gridColumns) * gridHeight;
    x = (i * gridWidth) % (gridColumns * gridWidth);
    $("<div/>").css({position:"absolute"border:"1px solid #454545"width:gridWidth-1height:gridHeight-1top:yleft:x}).prependTo($container);
}
 
//set the container's size to match the grid, and ensure that the box widths/heights reflect the variables above
gsap.set($container, {height: gridRows * gridHeight + 1width: gridColumns * gridWidth + 1});
gsap.set(".box", {width:gridWidthheight:gridHeightlineHeight:gridHeight + "px"});
gsap.set("#box2", {left: gridWidth * 2})
 
//the update() function is what creates the Draggable according to the options selected (snapping).
function update() {
  var snap = $snap.prop("checked"),
      liveSnap = $liveSnap.prop("checked");
    Draggable.create(".box", {
        bounds: $container,
        edgeResistance: 0.65,
        type: "x,y",
        inertia: true,
    autoScroll: true,
        liveSnap: liveSnap,
        snap:{
            x: function(endValue) {
                return (snap || liveSnap) ? Math.round(endValue / gridWidth) * gridWidth : endValue;
            },
            y: function(endValue) {
                return (snap || liveSnap) ? Math.round(endValue / gridHeight) * gridHeight : endValue;
            }
        }
    });
}
 
//when the user toggles one of the "snap" modes, make the necessary updates...
$snap.on("change"applySnap);
$liveSnap.on("change"applySnap);
 
function applySnap() {
    if ($snap.prop("checked") || $liveSnap.prop("checked")) {
        $(".box").each(function(indexelement) {
            gsap.to(element, {
                x: Math.round(gsap.getProperty(element"x") / gridWidth) * gridWidth,
                y: Math.round(gsap.getProperty(element"y") / gridHeight) * gridHeight,
                delay: 0.1,
                ease: "power2.inOut"
            });
        });
    }
    update();
}
 
update();
 
-----------------------------------------------------------------stylesheet.css file-----------------------------------------------------
 
body {
    background-color:black;
    font-family: Signika Negative, Asap, sans-serif;
  }
  
  #container {
    height:801px
    overflow:visible
    padding:0
    position:relative;
  }
  
  .box {
      background-color#91e600;
      text-aligncenter;
      font-family: Asap, Avenir, Arialsans-serif;
      width196px;
      height100px;
      line-height100px;
      colorblack;
      positionabsolute;
      top:0;
      -webkit-border-radius10px;
      -moz-border-radius10px;
      border-radius10px;
  }
  
  .controls {
      background-color#222;
      border1px solid #555;
      color#bbb;
      font-size18px;
    margin20px 0;
  }
  .controls ul {
      list-stylenone;
      padding0;
      margin0;
  }
  .controls li {
      displayinline-block;
      padding8px 0 8px 10px;
      margin:0;
  }
  .controls input {
    vertical-align:middle;
    cursorpointer;
  }
  .controls .controlsTitle {
    border-right:1px solid #555
    border-bottom:none
    padding-right:10px;
  }
Link to comment
Share on other sites

Are you talking about this demo?

See the Pen zDwEk by GreenSock (@GreenSock) on CodePen

 

If so, did you export the demo?

834PEYv.jpg

  • Like 1
Link to comment
Share on other sites

Have your tried loading your scripts before the closing </body> tag?

  • Like 1
Link to comment
Share on other sites

28 minutes ago, PointC said:

Are you talking about this demo?

 

 

 

If so, did you export the demo?

834PEYv.jpg

Yes exactly! But I didn't noticed this option... So I need to subscribe to retrieve all complete samples... Thank you for that !

Link to comment
Share on other sites

You don't need to pay, but you do need an account.

 

I do think you just have a 'DOM not ready' problem here. I'd try moving those scripts to the bottom of the page or check if the DOM is ready in your custom JS file. Check out this info from @Jonathan for more info about that.

 

  • Like 2
Link to comment
Share on other sites

Hmm.. certainly a lot going on there.

If I am not mistaken - looks like some jQuery code in there as well.

would need to include those libraries as well.

 

But - all that aside -

35 minutes ago, EricMtl said:

As a beginner it's really frustrating to loose so much time for such a basic training


Not sure I would call trying to copy paste from a codepen “basic training”. As a beginner - I would advise against copying and pasting code as a means to learn this craft. I would suggest starting small and keying it all youself.

That will help you to be much more “intimate” with your own code because you’ll know firsthand how all the elements came to be and how they fit together.

 

Just my two cents.

Link to comment
Share on other sites

25 minutes ago, PointC said:

Have your tried loading your scripts before the closing </body> tag?

 

Pfff ! I registered to CodePen and dl'ed the zip file.

Finally the /dist folder (not the /src one) content works !!!

Thank you for your help.

 

 

Link to comment
Share on other sites

 

19 minutes ago, Greg Stager said:

Hmm.. certainly a lot going on there.

If I am not mistaken - looks like some jQuery code in there as well.

would need to include those libraries as well.

 

But - all that aside -


Not sure I would call trying to copy paste from a codepen “basic training”. As a beginner - I would advise against copying and pasting code as a means to learn this craft. I would suggest starting small and keying it all youself.

That will help you to be much more “intimate” with your own code because you’ll know firsthand how all the elements came to be and how they fit together.

 

Just my two cents.

14 minutes ago, PointC said:

You don't need to pay, but you do need an account.

 

I do think you just have a 'DOM not ready' problem here. I'd try moving those scripts to the bottom of the page or check if the DOM is ready in your custom JS file. Check out this info from @Jonathan for more info about that.

@PointC :I am not a JS specialist  but I'll try do move all "include" scripts to the end of body.

@Greg; ...when you think you're going to save time by copying/pasting....  :(

Thx you all  for your time!

 

Link to comment
Share on other sites

5 minutes ago, EricMtl said:

.when you think you're going to save time by copying/pasting....  :(

 

Hey, we've all been there. But, as with anything, you'll find that you save time once you understand the concepts. There's no shortcut to that (other than hiring out). Without time and understanding, it's just throwing darts in a dark room. But, when you do have the concepts under your belt, building on other people's work will DEFINITELY save time (thanks @GreenSock!!) 😊

  • Like 1
  • Haha 2
Link to comment
Share on other sites

I rapidly checked sources codes and relocated included script files to the end of <body> . 

 

For the same index.html file , seems that all depends of these paths....

 

That sequence works  :)

<!-- <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script>
        <script type ="text/javascript">src="InertiaPlugin.min.js"</script>
        <script type ="text/javascript" src="index.js"></script> -->
 
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script>
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
        <script  src="./index.js"></script>
    </body>

 

 

That one fails :( 

        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script>
        <script type ="text/javascript">src="InertiaPlugin.min.js"</script>
        <script type ="text/javascript" src="index.js"></script>
 
        <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script>
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
        <script  src="./index.js"></script> -->
Link to comment
Share on other sites

Keep in mind that the Inertia plugin is a Club plugin so there is no CDN for it outside of CodePen demos. You'll always need to host Club plugins with your own files.

 

Happy tweening,

:)

 

  • Like 2
Link to comment
Share on other sites

11 hours ago, EricMtl said:

That one fails :( 

        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script>
        <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script>
        <script type ="text/javascript">src="InertiaPlugin.min.js"</script>
        <script type ="text/javascript" src="index.js"></script>
 
        <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script>
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
        <script  src="./index.js"></script> -->

 

The set that fails is because your opening script tag is terminated after the type property, so you're writing this

 

<script type="text/javascript">
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"
</script>

 

 

  • Like 3
Link to comment
Share on other sites

Ooch ! My eyes  betrayed me...

I must admit that I spend too long time on this bug without a break...

 

Again, thank you all for your assistance and your responsiveness.

 

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.
×