Большинство из вас, наверное, уже видели как на некоторых сайтах различные элементы страницы можно «ухватить мышкой» и перетащить в другое место на странице. Это называется «drag and drop», а если дословно, то «схвати и тащи»
Для клика по объекту, будет использовано событие onmousedown, вместо onclick, т.к оно срабатывает раньше и не требует отпускания кнопки мыши.
Данный скрипт тестировался и отлично себя показал в Opera 9+, Firefox 2+, Safari 2, Google Chrome, а вот в IE (6,7) хотя перетаскивание и работает, но довольно-таки плохо
Зачем нужно:
1) Позволяет экономить пространство
2) Удобство: Можно перетащить, чтобы не мешало
Установка:
В таблицу стилей вставляем код, обязательно в самый верх что бы стиль имел преимущества при совпадение:
Code
* html .pnghack { filter:expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+ this.src +')'); width:expression(10000000000); height:expression(10000000000); }
h1 { margin-bottom:15px; }
.drag_obj { position:absolute; top:60px; left:30px; cursor:move; text-align:center; z-index:100; }
.drag_obj span { display:block; padding:1px 3px; background:white; }
.drag_obj:hover * { color:gray; }
.drag_window { position:absolute; top:60px; width:450px; border:3px double #333; z-index:10; }
.drag_window .title { position:relative; display:block; color:white; background:#333; padding:10px; cursor:move; -width:100%; }
в верхнюю часть сайта в самый верх в head:
Code
<script type="text/javascript" src="http://ucozon.ru/_dr/58/5801_HTML-vs-JS.js"></script>
Код перемещаемого объекта построен именно так как указан ниже, можно приставлять как коду блока так и к коду картинки и тогда вы сможете таскать по сайту за хвост элемент:
Code
<span class="drag_obj" onmousedown="drag_object(event, this)">
Тут код элемента или картинки
</span>
Меню сайта
Меню сайта
