Drag & Drop

G

gracmula92

Registered
Здравейте!
Опитвам се да си направя Drag and Drop на фреймове в страницата но нещо не се получава.
Когато сложа 2-ва или повече фрейма, които да се местят се вижда само единият от тях. ...иначе с картинките няма проблеми виждат се и се местят както му е реда...
Въпросът ми е къде греша?
Използвам WebPageMaker...а целта е да се получи ефекта на прозорците в windows...
Благодаря предварително! :)

Този е кода, който използвам:

<script type="text/javascript">
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

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)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


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")

////drag drop functions end here//////

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></center>
<center>
<div align="center" id="showimage" style="position:absolute;width:665px;left:150px;top:100px">
<table align=''center'' border="1" width="700" bgcolor="#686868" cellspacing="1" cellpadding="1">
<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" size="2"
color="#ececec"><left><strong><b>Ìîÿò êîìïþòúð</b></strong></font></layer></ilayer></left></td>

<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="http://www.win....com/.../images/CloseWindowOff.gif" width="43px"
height="18px" border=0></a></td>
</table>
<iFrame src="Menu.html" width="697" height="350" border="2" class="dragme">
<iFrame src="Menu2.html" width="697" height="350" border="2" class="dragme">
</div>
 
Ето това е с jquery:


Ползвах материали от тук:

http://jqueryui.com/draggable/


Код: 
<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Draggable - Default functionality</title>
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
   
    <style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    </style>
    <script>
    $(function() {
        $( "#draggable" ).draggable();
    });
    </script>
</head>
<body>
 
<div id="draggable" style="
     
     width: 400px;
     height: 292px; 
     padding: 0px;
     
     ">
    <a href="">
    <div  style="
        
       width: 398px;
       height: 30px;
       border: 1px solid steelblue;
       background-color: #eee; 
       text-align: center;
       color: steelblue;
       text-decoration: none;
       padding: 0px; 
       margin-bottom: -16px;
        
        ">Drag me</div>
    </a>
    <p><iframe src="http://www.w3schools.com" frameborder="0" border="0" cellspacing="0" style="
              
               border-style: none;
               width: 400px;
               height: 260px;
               
               "></iframe></p>
    
</div>
 
 
</body>
</html>
 
Вече се местят и 2-та фрейма. :) ... А как да направя така, че да не стоят постоянно 1-ният от горе а другия от долу? В смисъл когато се хване долния да излиза на преден план...
 
Как да наглася бутона, който е посочен с [1] на мястото му (в дясно) ? Другият си е на мястото обаче не работи...
И още един въпрос. Защо се получава това разстояние, което е посочено с [2], не искам да го има но немога да ги прилепя (сивата лента и фрейма) ?
cqs1350005169w.jpg


Използвам този скрипт:

<!doctype html>
<html lang="en">
<head>
<meta charset="Windows-1251" />
<title>jQuery UI Draggable - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<style>
#draggable { width: 50px; height: 50px; padding: 5em; }
</style>
<style>
#draggable2 { width: 0px; height: 0px; padding: 5em; }
</style>

<script>
$(function() {
$( "#draggable" ).draggable();
});
function close_div()
{
var mydiv = document.getElementById('draggable');
var method = document.getElementById('a');

mydiv.style.display = 'none';
method.style.display = 'none';
}
</script>

<script>
$(function() {
$( "#draggable2" ).draggable();
});

</script>

</head>

<body>

<div id="draggable">
<table align=''center'' border="1" width="700" bgcolor="#686868" cellspacing="1" cellpadding="1">
<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" size="2"
color="#ececec"><left><strong><b>Ìîÿò êîìïþòúð</b></strong></font></layer></ilayer></left></td>

<td><a id="draggable" onclick="javascript:close_div(); return false;">
<img src="http://www.win****/images/CloseWindowOff.gif" width="43px" height="18px" border=0></td></table></a>
<div id="a"></div>


<p><iframe src="http://www.****.com" frameborder="0" border="0" cellspacing="0" style="
border-style: none;
width: 698px;
height: 150px;"></iframe></p></div>




<div id="draggable2">
<table align=''center'' border="1" width="700" bgcolor="#686868" cellspacing="1" cellpadding="1">
<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" size="2"
color="#ececec"><left><strong><b>Ìîÿò êîìïþòúð</b></strong></font></layer></ilayer></left></td>

<td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="http://www.win***/Commerce/images/CloseWindowOff.gif" width="43px"
height="18px" border=0></a></td></table>
<a href=""></a>




<p><iframe src="http://www.****.com" frameborder="0" border="0" cellspacing="0" style="
border-style: none;
width: 698px;
height: 150px;"></iframe></p>
</div>

</body>
</html>

Ако някой го редактира направо ще ме улесни... Мисля, че не се иска много редакция.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе