Jump to content

Search the Community

Showing results for tags 'draggable'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 478 results

  1. Hi Everyone, I've been trying to recreate one of the infinite Draggable carousel that I've seen in this forum Any idea of what I'm missing? Thank you in advance
  2. Hello, As said above, I am having an issue where when I throw or drag the draggable div it is always bound to the top of the page like a magnet. I didn't set it like this, and can't figure out how to let it move where ever it is being thrown. Does anyone know why this is happening? Here is the link to the repository and to the site. https://github.com/jacobtruax/Mole-End https://jacobtruax.github.io/Mole-End/ Thanks
  3. greg_mich

    Greg M

    I am using draggable on a custom keyboard. The issue I run into is when you accidentally drag on the keys the keyboard drags and the key press is not fired. My question is, is there a way to only drag a component from the background? And not allow drag on inner elements?
  4. Hello everyone, i think this is more of a math related question i struggle finding a solution for. I have a slider that is draggable and stops at the different slides with a snap point. Now i want to tween a value from 0 to 1 while between the snap points. I need a way to calculate the progress to the next snap point, that means 0 if at one of the snap points and 1 if 1px in front of the next snap point, then back at 0 and again from the beginning. Is there some math magic 😁that can give me this value? Thanks in advance.
  5. Cat

    ThrowPops import Error

    Hi all, I'm trying to use the ThrowPropsPlugin together with the Draggable functionality in my VUEjs website. However every time I set the property "throwProps" to true I get this error: Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: x I know there are already other topics with the same subject opened but I've tried the solutions mentioned in there and nothing helped. Here's my code for reference. If anyone could help it would be much appreciated. Thanks! require('../libs/ThrowPropsPlugin') import Draggable from 'gsap/Draggable' export default { mounted() { initDraggable() }, methods: { initDraggable() { Draggable.create(this.$refs.slider, { type: 'x', minimumMovement: 10, edgeResistance: 0.5, throwProps: true, bounds: this.$refs.wrapper, onDragEnd: function() { console.log('target: ' + ThrowPropsPlugin.getVelocity(this.target, "x")) } }) } } }
  6. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  7. Hi Just discovered GSAP and what a great library it is! I am having a problem with bounding my draggable components in my React testing. I have followed the great instructions found here (https://greensock.com/react) to get a reference to the React generated DOM element and haven't had any problems making them draggable. The draggables sit inside of another React component which should act as the bounding element. I am again getting a reference to this element as previously described and passing this into the draggable components as props - to be referenced by the draggable childrens draggable.create. This works (in that it doesn't throw any errors and my console logs are showing the correct DOM element being passed in) but the draggable bounds are behaving very oddly. A demo paints a million words so you can see what I mean here (I'm a bit more comfortable in codesandbox.io): The draggable elements appear to be bounded by something (not a DOM element I recognise) that is exactly 4 times their size and not their parent component? I have seen demo's, such as this one where they are successfully bounding a child react component in its parent. The only obvious difference to me appears to be the use of a class component over a functional component but, again, I'm not sure why that would make a difference? Note: I'm not adverse to using a class component but would love to understand why this is behaving the way it is. Any tips or suggestions welcome!
  8. I'm getting this error when attempting to implement Draggable. I'm confused because I am able to do some of the functions that are shown in the 'Get Started' section i.e var obj = {myProp:0};TweenLite.to(obj, 2, {myProp:100}); I added a codepen - very simple representation of what I am doing. Any idea what's going wrong here?
  9. Hi, I have options with gray border and selected with gray background: <div class="options"> <div class="item">Criancas</div> <div class="item">Bebes</div> <div class="item">Brinquedos</div> </div> <div class="selected"> </div> On javascript part all of items are Draggable. And have the function onRelease that checks if the item "hit" the "selected" div. All works fine, but the final animation. When I Drag the item is ok, but when i release it, the animation to go "back" to the x:0 and y:0 of the new parent starts from the another side of screen. When the item change parent they get new x and y and the release animation starts from that new coordinates. How can i make the release animation starts from the actual coordinates relative to the new parent and avoid this bump? Thks
  10. Hi guys I saw this demo in the forum lately: https://codepen.io/PointC/pen/YRzRyM I have a draggable horizontal slider in my current project and I would like to make it also scrollable with snapping. Snapping already works. But I have no idea how to make it also scrollable because I am a newbie in JS. Thank you for any help! Best, Cédric
  11. I was looking to see if there's a way to support a multi-finger drag when I came across a year old forum post (http://greensock.com/forums/topic/11897-multi-finger-swipe-on-draggable/). Instead of bringing it back I thought it better to post a new one. Essentially, I need the ability for any number of fingers to be detected the same by draggable. I am using draggable in a touchscreen kiosk to scroll a div within a bounding container. There isn't any pinch zoom or other multi touch gestures that it would interfere with. Users don't understand that the kiosks only work with a one finger drag at the moment, so the client wants to add multi-touch compatibility to dragging. I know of hammer however everything is already written using draggable (I'm already using Hammer for swiping on different elements in a different manner), and I really like the smoothness of draggable. In order to use hammer I'd have to rewrite draggable's throwprops which I'd rather not have to do. Is there a way to allow multi finger touch or has that not been added? Thanks!
  12. Hi guys I have a horizontal fullscreen draggable slider. When I click and drag the slides get smaller and you can drag through all the different slides. Now I have the problem, that I wanna put buttons and play-buttons in those slides, but now always when I click on the buttons, the slider starts dragging. Is there a way to block the dragging on a specific element which is inside another draggable container who should stay draggable? Thanks a lot for your help!
  13. Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?
  14. Hi First post. I just updated to latest and greatest (2.1.1), i read in the release notes that dragClickables is default true by now. Cool I though, I already had that to true. But after updating the drags no longer work (on chrome 72) when starting on a clickable (<a>). Reverted back to 2.0.2 and they work again. //Andreas
  15. I thought this was a pretty straightforward question, so I didn't make a demo. Lmk if it would help. Anyways, I'm wondering if there is any recommended way to simulate dragging a draggable with throwprops+snaps using two-finger scrolling on a laptop trackpad. I don't want gesture detection, but instead want to real time control of the draggable, just like how it would be if you were to drag on a mobile device. So far the only method I've thought of is to directly read the scroll event and use those values to create a throwprops tween and update the draggable at some point so that the snap settings take effect. I'd also have to figure out how to cut off scroll values created by any client side inertial scrolling shenanigans.Later on I'd also want to figure something out for a standard mousewheel as well. I know the easy way would just be to use scroll-jacking, but that makes for a terrible user experience. Any ideas?
  16. Hi I coded this animated boombox in notepad++ and when the dragger at the bottom is dragged the width of the slider should increase, like in the image below. It works perfectly in my browser but when I put the same code in codepen the width updates as its supposed to but the slider never animates. Is this a codepen issue? or is there something I've left out that is causing this? Thanks
  17. Hi there, in one of the projects i am currently working on, i implemented a "Draggable" (nothing special) to provide some kind of knob for the user. Everything works fine as expected, until the DOM-structure has been changed (unfortunately it has to be that way). The knob now shows some strange behavior. I forked a PEN (https://codepen.io/GreenSock/pen/ywpet -> https://codepen.io/anon/pen/yZMLEV) to show what i mean and only added some HTML and CSS to build a minimal setup. The problem is, that the mouse is not following the knob-handler as precise as before. Does anyone knows this behavior and has some hint for me? Thanks in advance!
  18. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  19. Hi, I use the Draggable plugin locked on the y axis to manage scrolling in a section. I would like to retrieve the y position of the scrolled element to trigger an event when reaching the end of the scroll area. It's working as follow when the user drag but not when he use the mouse wheel for ex. Draggable.create(Pr, { type: 'scrollTop', ... onDrag: function(e) { type: 'scrollTop', this.update() console.log(this.y) } }) How can I get a unified way to retrieve the y position between the different events, drag, scroll, etc.
  20. Hi all, i get this error on the console ON MOBILE getting document.elementsFromPoint(posX, posY). On Chrome on desktop it works nice :( My code: I have the example with the error on jsfiddle: http://jsfiddle.net/equerol/92j45hd0/21/
  21. Hello friends, I would like to know if there is a way to simulate the Drag on event using Draggable. I need to activate MouseWheel down to simulate drag to the left, and when activating MouseWheel up simulate the drag to the right.
  22. Hi, I want .home__links-container element to rotate around smiley face. To see exactly what I mean you can open codepen in Firefox or uncomment .home__links-container styling (starts in line 22) and handleRotate function (starts in line 1) and comment out TweenLite.set (line 13). The problem is that on Chrome the .home__links-container element that contains links is bigger than parent <svg> and the circle menu is not in the middle of .home__links-container. On Firefox however .home__links-container has (almost) the same size as parent <svg> and rotation works as expected - see screenshots https://imgur.com/a/Udzvx1D. I don't understand why Chrome doesn't calculate transformOrigin set by TweenLite correctly. Can someone help me with this? I can set Draggable rotate on parent svg but then smiley face rotates too and I want to avoid it.
  23. I tried to place my page using Draggable.js on an Android WebView but it seems like it's not working after I dragged something. It works on the Chrome app though. This is my WebSettings for the WebView. String UA = "Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19" + " (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19"; WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(false); settings.setBuiltInZoomControls(false); settings.setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND); settings.setDatabaseEnabled(true); settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL); settings.setRenderPriority(WebSettings.RenderPriority.HIGH); settings.setCacheMode(WebSettings.LOAD_DEFAULT); settings.setDomStorageEnabled(false); settings.setUseWideViewPort(true); settings.setAllowFileAccess(true); settings.setAppCacheEnabled(true); settings.setUserAgentString(UA); This is my whole code. import android.content.Context; import android.content.DialogInterface; import android.net.http.SslError; import android.os.Build; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.DragEvent; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.webkit.ConsoleMessage; import android.webkit.CookieManager; import android.webkit.SslErrorHandler; import android.webkit.WebChromeClient; import android.webkit.WebResourceError; import android.webkit.WebResourceRequest; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.EditText; import android.widget.RelativeLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity { WebView webView; SwipeRefreshLayout swiLyt; String url = ""; Context ctx = this; String TAG = "simpler"; String httpReq = ""; TextView lbl; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.webview); swiLyt = findViewById(R.id.swiLyt); lbl = findViewById(R.id.lbl); httpReq = "http://"; swiLyt.setEnabled(false); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { webView.setWebContentsDebuggingEnabled(true); } final WebViewClient webClient = new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { swiLyt.setRefreshing(false); lbl.setText(url); fullScreen(); } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Error"); dlgBuild.setMessage("Err: "+errorCode+" desc: "+description); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); super.onReceivedError(view, errorCode, description, failingUrl); } @Override public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Error"); dlgBuild.setMessage("Err: "+error.toString()); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); super.onReceivedError(view, request, error); } @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("SSL Error"); dlgBuild.setMessage("Err: "+error.toString()); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); super.onReceivedSslError(view, handler, error); } }; WebChromeClient webChromeClient = new WebChromeClient() { @Override public boolean onConsoleMessage(ConsoleMessage consoleMessage) { AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Console"); dlgBuild.setMessage(consoleMessage.message()); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); return super.onConsoleMessage(consoleMessage); } }; String UA2 = "Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36" + " (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36"; WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(false); settings.setBuiltInZoomControls(false); settings.setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND); settings.setDatabaseEnabled(true); settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL); settings.setRenderPriority(WebSettings.RenderPriority.HIGH); settings.setCacheMode(WebSettings.LOAD_DEFAULT); settings.setDomStorageEnabled(false); settings.setUseWideViewPort(true); settings.setAllowFileAccess(true); settings.setAppCacheEnabled(true); settings.setUserAgentString(UA2); webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); webView.setWebViewClient(webClient); webView.setWebChromeClient(webChromeClient); webView.setVerticalScrollBarEnabled(false); webView.setHorizontalScrollBarEnabled(false); webView.setLongClickable(true); webView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View view) { Log.d(TAG, "long click"); return false; } }); webView.setOnDragListener(new View.OnDragListener() { @Override public boolean onDrag(View v, DragEvent event) { return false; } }); showDlg(); } public void showDlg(){ RelativeLayout lyt = new RelativeLayout(ctx); final EditText txt = new EditText(ctx); RelativeLayout.LayoutParams lytParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); txt.setHint("ip:port"); txt.setLayoutParams(lytParams); lyt.addView(txt); txt.setText("192.168.149.59/pos_mock_up"); AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Enter ip:port"); dlgBuild.setCancelable(false); dlgBuild.setView(lyt); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { String ipPort = txt.getText().toString(); if(!ipPort.contains(httpReq)){ url = httpReq+ipPort; } Log.d(TAG, "url: "+url); swiLyt.setRefreshing(true); webView.loadUrl(url); } }); dlgBuild.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); AlertDialog dlg = dlgBuild.create(); dlg.show(); } @Override public void onBackPressed() { webView.loadUrl("javascript:OnBackPressed()"); } private void fullScreen(){ final View decorView = getWindow().getDecorView(); decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); decorView.setOnSystemUiVisibilityChangeListener (new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { // Note that system bars will only be "visible" if none of the // LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set. if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) { // The system bars are visible. Make any desired // adjustments to your UI, such as showing the action bar or // other navigational controls. decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); } else { // The system bars are NOT visible. Make any desired // adjustments to your UI, such as hiding the action bar or // other navigational controls. decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); } } }); } } Sorry, I don't really know how to create a test but that code above is everything I only used for the project I'm working. This is my layout file if you need it. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swiLyt" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> a<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" > </WebView> </android.support.v4.widget.SwipeRefreshLayout> <TextView android:id="@+id/lbl" android:layout_width="0dp" android:layout_height="wrap_content" android:textColor="#0000ff" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </android.support.constraint.ConstraintLayout>
  24. Hi all, Recently I made this 3D cube and I can't seem to get the navigation to work properly: I used this example of Chris Gannon: https://codepen.io/GreenSock/pen/3ff3af968fb3356423998050b0ae1d42?editors=0010 to create the cube and interaction. Dragging works fine with snapping, but when you click on the navigation buttons while the cube is tweening, 90 degrees are added, so the cube isn't 'snapping' anymore and it look likes the cube hasn't turned all the way. I've added a check to prevent this, but still no luck. Is there a way to disable the click while the cube is tweening? Or should I use some sort of 'snap' to allow the cube to turn only by 90 degrees. Any help is very much appreciated!
  25. Hello... how can get this overflow-x to scroll with a nice flick ? and be bound to the overflowed container ? Could flexbox be part of the problem ? I've forked one of Diaco's pens from another post. Thank you for the help!