|
| ||||||
|
Перемещение изображения на странице сайта с помощью мышиИнформация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров. В этом уроке я хочу представить Вам универсальный скрипт, который позволяет перетаскивать любое изображение или текст на странице сайта. Чтобы добиться такого эффекта необходимо присвоить этим элементам класс «drag» (тянуться, перетаскивание).
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master. Шаг 1. Этот код (стилей и скрипта) необходимо разместить между тегами head, причем код скрипта можно размещать как в head так и в body:
<!--пропись стилей-->
<style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<!--код скрипта-->
<script type="text/javascript">
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. После установки стилей и скрипта, обеспечивающего эффект перемещения, вставляем в выбранное место страницы сайта в body код изображений, приписывая класс drag. Подготовленные изображения, соответственно, должны быть заранее загружены в папку изображений, например img: <img src="img/test.png" class="drag" alt=""><br> <img src="img/test2.png" class="drag" alt=""><br> Изображения теперь будут двигаться при перетаскивании их мышью. Это Вы видели в демо-примере. <html> <body> <h1><b class="drag">ПРИВЕТ ВСЕМ!!!</b></h1> </body> </html> Обратите внимание, что в class="drag" добавляется внутренний элемент b. На этом всё. Думаю, что урок несложный и Вы вполне сможете применить такой эффект на своём сайте. Творческих успехов и удачи! Ваш Л.М. | |||||
| ||||||