Shopify Draggable Wallpaper and Logo

Shopify Draggable Tutorial: How to Drag and Drop in Shopify

  Shopify

Learn how to integrate Shopify Draggable into any of your web application in a very simple way.

It’s quite popular these days to interact with everything through mobile devices. Tapping, swiping, dragging things up and down, or even zooming in and out. All of these are possible with mobile devices.

Now, the problem arises, can all of these actions be done as well by desktop computers? Technically yes but most of the time no. Besides, it all depends on the capability of your display if it can do such actions like touch-screen.

But what if your desktop doesn’t have touch-screen features? Can you still drag or swipe? Maybe with the cursor instead?

100% yes! Thanks to Shopify Draggable, you can drag and drop web objects easily without too much programming.

So without further ado, let’s get started

 

What is Shopify Draggable

Shopify Draggable is a drag & drop library that allows developers to build interactive objects for users to drag from one place into another. For example, users can drag a product into the trash for deletion.

Shopify Draggable is also extensible which means if you have enough technical skills you can extend this library into something more useful. For instance, drag and popup or “drag and drop to see your prize!“.

Features

Unfortunately, Shopify Draggable is no longer being maintained by its original developers. However, this library could still give you the following features:

  • Drag & drop by mouse / touch
  • Extendable dragging behaviour
  • Extendable drag detection

Installing Shopify Draggable

What we liked about Shopify draggable is that it could easily be installed in many ways. For example, if you are using Laravel for Shopify Development then you can just run the following code.

npm install @shopify/draggable --save

If you’re using yarn then

yarn add @shopify/draggable

On the other hand, if you want to use their CDN directly. You can use one of the following script tags

 

<!-- Entire bundle -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>

<!-- legacy bundle for older browsers (IE11) -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.legacy.js"></script>

<!-- Draggable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>

<!-- Sortable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>

<!-- Droppable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/droppable.js"></script>

<!-- Swappable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/swappable.js"></script>

<!-- Plugins only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>

Browser Compatibility

If you are worried about this library not being compatible with all of the versions of the popular browsers then worry not! Because Shopify Draggable is compatible with:

  • Google Chrome
  • Mozilla Firefox
  • Internet Explorer
  • Microsoft Edge
  • Opera
  • Safari

Examples

Whenever you use Shopify Draggable, it is important to remember that draggable objects must be inside a container or element.

Also, we’re going to use this library without any frameworks which mean pure HTML is what we only needed. This way, it’ll be much easier for you to understand how this library works.

Don’t worry, we’ll be guiding you step by step on how to use Shopify Draggable.

First, let’s create an empty HTML file.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<style>

		</style>
	</head>
	<body>

	</body>
	<script type="text/javascript">

	</script>
</html>

Next, let’s import the library using CDN.

Add the following line inside the head tag.

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.min.js"></script>

Now that we have the library installed, let’s create the objects that we can drag.

Inside the body tag, copy the following code.

<div class="block">
	<div class="droppable draggable-dropzone--occupied">
		<div class="draggable"></div>
	</div>
</div>

<div class="block">
	<div class="droppable"></div>
</div>

In the code example above, we have declared three div classes and that is the block class, droppable class, and the draggable class.

Block Class

Take note that we called this “block” class because the above code, more specifically the div tag has a class of block. You can always change this class to whatever name you want as long as you specify that class in the javascript which we’ll do in a few moments.

Block class is where you can create all of the droppable objects. To simply explain this. All droppable elements must have their own parent block class like what the example above has.

Droppable Class

This class is used for objects to be dropped into. So for example, you have one draggable object. You can drag this object into this section with droppable class.

Keep in mind that the size of draggable objects MUST be equal to the size of the droppable objects.

And again, you can rename this class to whatever you want as long as you specify this in your javascript.

Draggable Class

This class will make any elements draggable and can be dropped onto any element with the class of droppable. Same with the rest, you can rename this class to whatever you want… and… of course specify it in the javascript. (We really love repeating ourselves, don’t we?)

Let’s continue

Inside the script tag, copy the following code.

const containers = document.querySelectorAll('.block')

const droppable = new Draggable.Droppable(containers, {
  draggable: '.draggable',
  droppable: '.droppable'
});

droppable.on('drag:start', () => console.log('drag:start'));
droppable.on('droppable:over', () => console.log('droppable:over'));
droppable.on('droppable:out', () => console.log('droppable:out'));

The above code is written in Javascript ES6. So make sure you copy this code inside the script tags.

To explain the above code, we firstly declared a constant variable and we called it containers. Then we select all elements with the class of block.

Currently, we have to two div elements with a class of block so that’s what the variable will look for.

Next, we declare a new droppable object and target all the available blocks that can be used by draggable objects and then we assign which element is draggable and droppable.

After that, we initialize the events:

  • drag:start
  • droppable:over
  • droppable:out

And then make a callback where we display in the console which event is currently happening.

 

Like we have mentioned before, it is important to give your objects their specified sizes to ensure that they will fit in their designated sections.

To do this, copy the following code inside the style tag.

.grid {
	display: grid;
	grid-template: 150px 150px 150px / 150px 150px 150px 150px;
	grid-gap: 10px;
	background-color: #ffffff;
	padding: 10px;
}
.draggable {
	background-color: #ff3946;
	box-shadow: 10px 10px 10px #7777;
}

.draggable, .droppable.draggable-dropzone--occupied{
	width: 100px; 
	height: 100px; 
}
.droppable{
	width: 100px; 
	height: 100px;
	border: solid;
	display: flex;
}

The code above will only give our objects a little bit of style which doesn’t actually matter but since we need to give our objects a width then might as well give it a style.

If you have noticed, we have a new class at the top of this CSS which is the .grid class.

This class does not matter as well, but this will organize our grid especially if we want to add more droppable sections on our page.

Let’s go back to our HTML and modify what’s inside the body tag:

<div class="grid">
	<div class="block">
		<div class="droppable draggable-dropzone--occupied">
			<div class="draggable"></div>
		</div>
	</div>

	<div class="block">
		<div class="droppable"></div>
	</div>
</div>

What we changed in our body tag is we simply added the grid class and then inserted our blocks inside of it.

We’re almost done!

Go save your file as index.html and open that file in your browser.

You should see something like this:

Shopify Draggable Tutorial - How to Drag and Drop Objects From One Place to Another

You may drag the red block into the empty block. You may also put it back into its place.

Now, what if you want to add more empty blocks for the draggable object?

The answer is very simple.

Just duplicate the block for the droppable object like below:

<div class="grid">
	<div class="block">
		<div class="droppable draggable-dropzone--occupied">
			<div class="draggable"></div>
		</div>
	</div>

	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
	<div class="block">
		<div class="droppable"></div>
	</div>
</div>

This will give you the following output:

Shopify Draggable - Drag and Drop Features for Shopify Developers

Conclusion

There you go! You have finally developed a simple web page where an object can be dragged and dropped into different blocks.

What we really liked about this library is the fact that you don’t need to use jquery to make this library work. Not only that. It is ridiculously fast and lightweight.

I highly recommend you to experiment with this library. As we said before, this library is extensible meaning you can add more features to it.

If you want us to write more about Shopify Draggable library, let us know in the comments below and let us know as well your reactions by clicking one of the emojis below.

We love seeing your reactions 🙂

React to this topic
Bernard Polidario
About Bernard Polidario

A full-stack developer who has been around programming community for 10+ years and still has a lot of passion for programming and design. I am the founder of WeeklyHow and I can be reached at [email protected]

https://weeklyhow.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
*