Очень классный скрипт, думаю многим будет полезен!
Код самого скрипта, в любое место на странице:
Code
<script type="text/javascript">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
var dragswitch=0
var nsx
var nsy
var nstemp
function drag_dropns(name){
if (!ns4) return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}
function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") :
document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"?
"documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")
function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}
</script>
Код блока:
Code
<div id="showimage" style="position:absolute;width:250px;left:40px;top:200px">
<table border="0" width="500" bgcolor="#000080" cellspacing="0" cellpadding="2">
<tr>
<td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
height="36px">
<tr>
<td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)">
<ilayer width="100%" onSelectStart="return false">
<layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0">
<font face="Verdana" color="#FFFFFF">
<strong><small>Перетаскиваемый блок</small></strong>
</font>
</layer></ilayer></td>
<td style="cursor:hand"><a href="#" onClick="hidebox();return false" style="color:yellow">X</a></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<img src="http:// авдрес изображения" width=500>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
В блок можно вставлять текст, картинки и т. д.
Материалы на эту же тему:
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Красивое раздвижное меню"
Скрипт "Кнопка добавить материал, новость"
Скрипт "Фоновое изображение на форуме"
Скрипт "Кнопка "Важно" и "PS" при добавлении темы/поста"
Скрипт "Картинка в поиск по сайту"
Скрипт "Переключатель страниц желтого цвета"
Скрипт "Кнопки Назад, На главную, Вперёд"