DragToDo

By default desktop browsers let you scroll an element or page using the mouse wheel. But its unfriendly when users want to scroll both horizontally and vertically. Mouse wheel doesn’t seem to be the best option in that case. Therefore we can let users scroll by holding the mouse button i.e., dragging. For example, Google maps lets you scroll the map horizontally and vertically by dragging the map using mouse button.

DragToDo

In this tutorial I will show you the easiest to provide drag scroll functionality for a scrollable element.

Dragscroll

  • Makers can now easily add and move fields and controls, to the exact location they want, directly on the form preview, and instantly see how the form will appear to end-users. Two new features added to the new form designer: drag-drop and cut-paste are making this possible. Combined with the live WYSIWYG preview of the form, these new features provide a big productivity boost when authoring forms.
  • Drag to a new group If you are using a traditional Group by View (with group headers) you can drag between groups to change the value of that field. Dragging between groups changes the group the Tasks belongs to.
  • Homemade tire drag Broadcast planting small forage seeds into heavy pasture sod often leads to poor seedling establishment because the tiny seeds do not reach the soil surface. A homemade implement can be constructed from used tires that can be dragged across the field with a tractor or ATV to scarify the sod.

Use Messages for web to send SMS, MMS and chat messages from your computer. Open the Messages app on your Android phone to get started.

Dragscoll is an open source JavaScript library which lets you achieve this with just few lines of code.

Here is a basic HTML element which loads this library

<!doctype html>
<html>
<head>
<title>Dragscroll Demo</title>
<scripttype='text/javascript'src='https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js'></script>
</head>
<body>
</body>
</html>

Here we are loading dragscroll library via Rawgit CDN.

Ultranium

Example

Here is a complete example showing how to use this library

<!doctype html>
<html>
<head>
<title>Dragscroll Demo</title>
<scripttype='text/javascript'src='https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js'></script>
</head>
<body>
<divclass='dragscroll'style='width: 320px; height: 160px; overflow: scroll; cursor: grab; cursor : -o-grab; cursor : -moz-grab; cursor : -webkit-grab;'>
<imgsrc='http://qnimate.com/wp-content/uploads/2014/09/header-scroll-effect.jpg'/>
</div>
</body>
</html>

Drag Door

This library finds the elements with class name dragscroll and its adds the dragging functionality to all those elements. Here I am changing the cursor from pointer to grab using CSS to make it more user-friendly.