Using Jquery + Easydrag To Deed Elements Or Images Yesteryear Clicking On Them
Friday, February 28, 2020
Edit
This is a elementary in addition to easy-to-use jQuery plugin which enables drag in addition to driblet functionality to brand your site to a greater extent than interactive therefore that readers tin "play" amongst for sure elements on the page past times dragging them from i side to another. For example, they tin drag the images amongst a script to motion them on whatever part of the spider web log simply amongst a mouse click.
2. Click anywhere within the template's code in addition to press the CTRL + F keys to search for this tag:
4. Save the changes past times clicking the 'Save template' button.
If yous take to utilization EasyDrag to motion a minute element, in addition to then add together your icon amongst a dissimilar id, for instance easydrag2, otherwise it won't work:
The code to utilization should expect something this:
Drag in addition to Drop Elements or Images on click amongst jQuery & EasyDrag
To run into how this works, delight view the present spider web log in addition to click on whatever item, in addition to then motion it anywhere on the screen:Adding EasyDrag & jQuery to Move Elements or Images inwards Blogger
1. Login to your Blogger account, larn to 'Template' in addition to click the 'Edit HTML' button:2. Click anywhere within the template's code in addition to press the CTRL + F keys to search for this tag:
</head>3. Just earlier </head> glue the next scripts:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>Note: If yous already bring jQuery, delight take away the code inwards red.
<script type='text/javascript'>
//<![CDATA[
(function($){var isMouseDown=false;var currentElement=null;var dropCallbacks={};var dragCallbacks={};var lastMouseX;var lastMouseY;var lastElemTop;var lastElemLeft;var dragStatus={};$.getMousePosition=function(e){var posx=0;var posy=0;if(!e)var e=window.event;if(e.pageX||e.pageY){posx=e.pageX;posy=e.pageY;}
else if(e.clientX||e.clientY){posx=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;posy=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;}
return{'x':posx,'y':posy};};$.updatePosition=function(e){var pos=$.getMousePosition(e);var spanX=(pos.x-lastMouseX);var spanY=(pos.y-lastMouseY);$(currentElement).css("top",(lastElemTop+spanY));$(currentElement).css("left",(lastElemLeft+spanX));};$(document).mousemove(function(e){if(isMouseDown&&dragStatus[currentElement.id]=='on'){$.updatePosition(e);if(dragCallbacks[currentElement.id]!=undefined){dragCallbacks[currentElement.id](e,currentElement);}
return false;}});$(document).mouseup(function(e){if(isMouseDown&&dragStatus[currentElement.id]=='on'){isMouseDown=false;if(dropCallbacks[currentElement.id]!=undefined){dropCallbacks[currentElement.id](e,currentElement);}
return false;}});$.fn.ondrag=function(callback){return this.each(function(){dragCallbacks[this.id]=callback;});};$.fn.ondrop=function(callback){return this.each(function(){dropCallbacks[this.id]=callback;});};$.fn.dragOff=function(){return this.each(function(){dragStatus[this.id]='off';});};$.fn.dragOn=function(){return this.each(function(){dragStatus[this.id]='on';});};$.fn.easydrag=function(allowBubbling){return this.each(function(){if(undefined==this.id||!this.id.length)this.id="easydrag"+(new Date().getTime());dragStatus[this.id]="on";$(this).css("cursor","move");$(this).mousedown(function(e){$(this).css("position","absolute");$(this).css("z-index","10000");isMouseDown=true;currentElement=this;var pos=$.getMousePosition(e);lastMouseX=pos.x;lastMouseY=pos.y;lastElemTop=this.offsetTop;lastElemLeft=this.offsetLeft;$.updatePosition(e);return allowBubbling?true:false;});});};})(jQuery);
//]]>
</script>
4. Save the changes past times clicking the 'Save template' button.
How to Move Elements or Images on Click Using EasyDrag & jQuery
Now, when yous desire to utilization EasyDrag to drag in addition to driblet an image, utilization the code below within the HTML of your post or page (create a New post, in addition to then switch to the HTML tab):<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />Note: alter the text inwards bluish amongst the URL of your icon in addition to delight Federal Reserve notation that each icon has an unique id. Here, for example, the id is called easeydrag1 which has been added both inwards the HTML of the icon in addition to JavaScript function.
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>
If yous take to utilization EasyDrag to motion a minute element, in addition to then add together your icon amongst a dissimilar id, for instance easydrag2, otherwise it won't work:
<img id="easydrag1" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
<img id="easydrag2" src="image-URL" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
$(function(){ $("#easydrag2").easydrag();});
</script>
How to add together a link to a draggable image?
We volition add together a JavaScript event, therefore that when nosotros volition double click on the image, to opened upwardly the page nosotros want.The code to utilization should expect something this:
<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('link-URL')" src="image-URL" /><script type="text/javascript">Using the script above, the icon tin live dragged to a greater extent than or less easily in addition to live activated past times double clicking on it.
$(function(){ $("#easydrag1").easydrag();});
</script>