Loading





Форекс с Альпари

eTXT




Анкетка


Перемещение изображения на странице сайта с помощью мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В этом уроке я хочу представить Вам универсальный скрипт, который позволяет перетаскивать любое изображение или текст на странице сайта. Чтобы добиться такого эффекта необходимо присвоить этим элементам класс «drag» (тянуться, перетаскивание).


Демо-пример Исходники (79 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через 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.

На этом всё. Думаю, что урок несложный и Вы вполне сможете применить такой эффект на своём сайте. Творческих успехов и удачи! Ваш Л.М.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка