Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This simple and easy to use jQuery plugin provides drag and drop functionality to make your site more interactive by allowing readers to "play" with certain page elements by dragging them from one page to another. For example, you can easily drag and drop images using a script to move them anywhere on the blog with your mouse.

Drag and drop elements or images with one click with jQuery and EasyDrag

To see how it works, visit the demo blog and click and drag any element anywhere on the screen:

Test blog

Add EasyDrag and jQuery to move elements or images in Blogger.

1. Log in to your Blogger account, go to the "Template" section and click the "Edit HTML" button:

2. Click anywhere on the template icon and press CTRL + F to find this tag:

3. Shortly before Paste the following scripts:

Note. If you already have jQuery, remove the red icon.

4. Save the changes by clicking on the "Save Form" button.

How to move elements or images in one click with EasyDrag and jQuery

Now, if you want to use EasyDrag to drag an image, use the following code in the HTML of your post or page (create a new post and go to the HTML tab):

Image URL "style=" border: 0px none; cursor: move; "/>

Note. Replace the blue text with the URL of the image, and remember that each image has a unique ID. For example, here the ID is called easydrag1 , which is added to both the HTML of the image and the JavaScript function.

If you need to use EasyDrag to pull the second element, then add your image with a different id, like b. easydrag2 otherwise it won't work:

How to add a link to an uploaded image?

We'll add a JavaScript event to open the desired page when the image is double-clicked.

The code used should look like this:

ondblClick="javascript: window. open(' Link URL ')" src=" Image URL "/>

With the script above, the image can be simply dragged and double-clicked to activate.