I really never thought its that simple to make elements in Weebly dragable. We are not talking about the elements to be drag into the page but elements that has been added via HTML. Well, surprisingly it's not only images but text too. Check out the demo and simply drag the social network icons.
1. Insert the following on Weebly's <head>. (<head> help here)
<style type="text/css">
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
2. Once done, go to the page you want to insert those dragable elements. Drag one "embed code" into the page and paste any of the following:
For Images:
<img src="http://theweeblytricks.weebly.com/files/theme/yahoo.png" class="drag" />
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/rss.png"/>
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/facebook.png" />
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/twitter.png" />
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/delicious.png"
/>
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/rss.png"/>
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/facebook.png" />
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/twitter.png" />
</br>
<img class="drag" src="http://theweeblytricks.weebly.com/files/theme/delicious.png"
/>
Simply change the image links with yours.
For Text:
<b class="drag">DRAG ME TOO!!</b>
To combine text and images simply insert the text code inside the images code as seen on the demo. However, the space where you can drag elements in Weebly's template is limited to the dimension of the HTML you used; the wider it is the more space you can drag these elements. Experiment for the best outcome.
0 comments: