تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
تطبيق منقول - Dragable Divs من خلال JavaSctript
#1
كاتب الموضوع : AhmedEssawy


كود :
[color=#00bbdd]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">[/color]
[color=#009900][url=http://december.com/html/4/element/html.html][COLOR=#000000][b]<HTML>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/head.html][COLOR=#000000][b]<HEAD>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/title.html][COLOR=#000000][b]<TITLE>[/b][/color][/url][/COLOR][color=#009900][COLOR=#000000][b]</TITLE>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/style.html][COLOR=#000000][b]<style>[/b][/color][/url][/COLOR]
.Text{
font-family: Verdana,Arial,Sans-serif,'Times New Roman';
font-size: 9pt;
font-weight: normal;
font-style: normal;
color: #666;
text-decoration: none;
}

.alertsBoxTitle{
font-family: Verdana,Arial,Sans-serif,'Times New Roman';
font-size: 9pt;
font-weight: bold;
font-style: normal;
color: #ffffff;
text-decoration: none;
}
.alertsBox{
background: #ECF1F9;
border: 1px #a1bcdf solid;
}
body{
overflow:hidden;
}
[color=#009900][COLOR=#000000][b]</style>[/b][/color][/COLOR][color=#009900][url=http://december.com/html/4/element/script.html][COLOR=#000000][b]<script[/b][/color][/url] [color=#000066]language[/color]=[color=#ff0000]"javascript"[/color][color=#000000][b]>[/b][/color][/COLOR]
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf('mozilla')!=-1) [COLOR=#ddbb00]&& (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));[/COLOR]
var is_nav4 = (is_nav [color=#ddbb00]&& (is_major == 4));[/color]
var is_nav6 = (is_nav [color=#ddbb00]&& (is_major == 5));[/color]
var is_nav6up = (is_nav [color=#ddbb00]&& (is_major >= 5));[/color]
var is_ie = ((agt.indexOf("msie") != -1) [color=#ddbb00]&& (agt.indexOf("opera") == -1));[/color]

var dragapproved=false
var z,x,y
var maxleft,maxtop,maxright,maxbottom;

function setdragBounds(){
//you can set the bounds of the draggable area here
maxleft = 10;
maxtop = 10;
maxright = document.body.clientWidth - 10;
maxbottom = document.body.clientHeight - 100;
}

function move(e){
var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;
var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;
if (dragapproved){
z.style.left = tmpXpos;
z.style.top = tmpYpos;

if(tmpXpos [color=#009900][COLOR=#000000][b]<[/b][/color] maxleft[color=#66cc66])[/color]z.[color=#000066]style[/color].left = maxleft;
if[color=#66cc66]([/color]tmpXpos [color=#000000][b]>[/b][/color][/COLOR] maxright)z.style.left = maxright;

if(tmpYpos [color=#009900][COLOR=#000000][b]<[/b][/color] maxtop[color=#66cc66])[/color]z.[color=#000066]style[/color].top = maxtop;
if[color=#66cc66]([/color]tmpYpos [color=#000000][b]>[/b][/color][/COLOR] maxbottom)z.style.top = maxbottom;
return false
}
}

function drags(e){
if (!(is_ie)[COLOR=#ddbb00]&&!(!is_ie))
return
var firedobj=(!is_ie)? e.target : event.srcElement
var topelement=(!is_ie)? "HTML" : "BODY"

while (firedobj.tagName!=topelement && firedobj.className!="drag" && firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && firedobj.tagName!='INPUT' && firedobj.tagName!='IMG'){
//you can add the elements that cannot be used for drag here. using their class name or id or tag names
firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
var tmpheight = z.style.height.split("px")
maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;[/COLOR]

temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=(!is_ie)? e.clientX: event.clientX
y=(!is_ie)? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

[color=#009900][COLOR=#000000][b]</script>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</HEAD>[/b][/color][/COLOR]

[color=#009900][url=http://december.com/html/4/element/body.html][COLOR=#000000][b]<BODY>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/div.html][COLOR=#000000][b]<div[/b][/color][/url] [color=#000066]id[/color]=[color=#ff0000]"Dialog"[/color] [color=#000066]style[/color]=[color=#ff0000]"width:316px;height:119px;max-width:316px;position:absolute;top:50px;left:140px; z-index:1000;"[/color] [color=#000066]class[/color]=[color=#ff0000]"drag"[/color][color=#000000][b]>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/table.html][COLOR=#000000][b]<table[/b][/color][/url] [color=#000066]width[/color]=[color=#ff0000]"100%"[/color] [color=#000066]style[/color]=[color=#ff0000]"width:315px;height:119px"[/color] [color=#000066]cellspacing[/color]=[color=#ff0000]"0"[/color] [color=#000066]cellpadding[/color]=[color=#ff0000]"0"[/color] [color=#000066]class[/color]=[color=#ff0000]"alertsBox"[/color] [color=#000066]id[/color]=[color=#ff0000]"dialog_table"[/color][color=#000000][b]>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/tr.html][COLOR=#000000][b]<tr[/b][/color][/url] [color=#000066]style[/color]=[color=#ff0000]"cursor:move"[/color][color=#000000][b]>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/td.html][COLOR=#000000][b]<td[/b][/color][/url] [color=#000066]class[/color]=[color=#ff0000]"alertsBoxTitle notselectable"[/color] [color=#000066]colspan[/color]=[color=#ff0000]"2"[/color] [color=#000066]align[/color]=[color=#ff0000]"left"[/color] [color=#000066]height[/color]=[color=#ff0000]"21"[/color] [color=#000066]style[/color]=[color=#ff0000]"cursor:move;background-color:#32426F"[/color][color=#000000][b]>[/b][/color][/COLOR]Drag Me[color=#009900][COLOR=#000000][b]</td>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</tr>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/tr.html][COLOR=#000000][b]<tr>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/td.html][COLOR=#000000][b]<td[/b][/color][/url] [color=#000066]align[/color]=[color=#ff0000]"center"[/color] [color=#000066]colspan[/color]=[color=#ff0000]"2"[/color] [color=#000066]height[/color]=[color=#ff0000]"5"[/color][color=#000000][b]>[/b][/color][/COLOR] [color=#009900][COLOR=#000000][b]</td>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</tr>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/tr.html][COLOR=#000000][b]<tr>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/td.html][COLOR=#000000][b]<td[/b][/color][/url] [color=#000066]align[/color]=[color=#ff0000]"center"[/color] [color=#000066]colspan[/color]=[color=#ff0000]"2"[/color][color=#000000][b]>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/table.html][COLOR=#000000][b]<table[/b][/color][/url] [color=#000066]width[/color]=[color=#ff0000]"97%"[/color] [color=#000066]border[/color]=[color=#ff0000]"0"[/color] [color=#000066]cellspacing[/color]=[color=#ff0000]"0"[/color] [color=#000066]cellpadding[/color]=[color=#ff0000]"0"[/color] [color=#000066]align[/color]=[color=#ff0000]"center"[/color][color=#000000][b]>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/tr.html][COLOR=#000000][b]<tr>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/td.html][COLOR=#000000][b]<td[/b][/color][/url] [color=#000066]valign[/color]=[color=#ff0000]'top'[/color] [color=#000066]align[/color]=[color=#ff0000]"center"[/color][color=#000000][b]>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</td>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</tr>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/tr.html][COLOR=#000000][b]<tr>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/td.html][COLOR=#000000][b]<td[/b][/color][/url] [color=#000066]valign[/color]=[color=#ff0000]'top'[/color] [color=#000066]colspan[/color]=[color=#ff0000]"2"[/color] [color=#000066]class[/color]=[color=#ff0000]"Text"[/color][color=#000000][b]>[/b][/color][/COLOR]You can place text here[color=#009900][COLOR=#000000][b]</td>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</tr>[/b][/color][/COLOR]
[color=#009900][url=http://december.com/html/4/element/tr.html][COLOR=#000000][b]<tr>[/b][/color][/url][/COLOR]
[color=#009900][url=http://december.com/html/4/element/td.html][COLOR=#000000][b]<td[/b][/color][/url] [color=#000066]valign[/color]=[color=#ff0000]'top'[/color] [color=#000066]colspan[/color]=[color=#ff0000]"2"[/color] [color=#000066]align[/color]=[color=#ff0000]"center"[/color][color=#000000][b]>[/b][/color][/COLOR][color=#009900][url=http://december.com/html/4/element/br.html][COLOR=#000000][b]<br[/b][/color][/url]/[color=#000000][b]>[/b][/color][/COLOR][color=#009900][url=http://december.com/html/4/element/input.html][COLOR=#000000][b]<input[/b][/color][/url] [color=#000066]type[/color]=[color=#ff0000]"button"[/color] [color=#000066]value[/color]=[color=#ff0000]"Ok"[/color]/[color=#000000][b]>[/b][/color][/COLOR][color=#009900][COLOR=#000000][b]</td>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</tr>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</table>[/b][/color][/COLOR][color=#009900][COLOR=#000000][b]</td>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</tr>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</table>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</div>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</BODY>[/b][/color][/COLOR]
[color=#009900][COLOR=#000000][b]</HTML>[/b][/color][/COLOR]
منقول من هنا :
http://www.bytemycode.com/snippets/snippet/428/
}}}
تم الشكر بواسطة:



التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم