Baru-baru ini, saya melihat beberapa teman di Internet mencari implementasi drag-and-drop yang mirip dengan beranda Google yang dipersonalisasi dan ruang MSN, dan kebetulan saya menemukan contoh di bawah ini. Namun ada banyak masalah fungsi Implementasi fungsi spesifiknya adalah sebagai berikut:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Demo Seret dan Lepas BlackSoul</title >
<!- -
______________________
|--------Penulis Oleh BlackSoul---------|
|------------30.03.2006------ ---- ----|
|[email protected] ------|
|------------QQ:9136194---- ---- ------|.
|------http://blacksoul.cnblogs.cn---|
==== ==== ===============
-->
<style type="text/css">
badan
{
margin:0px
}
#aim /*Tetapkan gaya lapisan target*/
{
position:absolute;/*Gaya
diperlukan untuk mengontrol posisi lapisan*/
lebar:200px
tinggi:30px
batas:1px solid #666666;
;
#sourceLayer, #cloneLayer
{
position:absolute;/*Gaya diperlukanuntuk
mengontrol posisi lapisan*/
lebar:
300px
tinggi:
50px
batas:1px solid #666666;
.berlabuh
{
tampilan:tidak ada;
filter:alpha(opasitas=100
}
.aktif
{
tampilan:blok;
filter:
alpha(opacity=
70)
;
<tubuh>
<div id="aim">Rentang penempatan</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="docked" unselectable="off"> </div>
<tipe skrip="teks/javascript" bahasa="javascript">
<!--
/*
============== =======
|--------Penulis Oleh BlackSoul---------|
|------------2006.03.30----- ---------||[email protected]
| -----------|.
|------http://blacksoul.cnblogs.cn---
| ===
*/
//Mengatur objek lapisan
var aim;
var sourceLayer
;
//Tentukan posisi awal setiap lapisan
var aimX;
var
aimY
;
//Variabel saat menyeret
var draging = false; //Apakah sedang diseret
var offsetX = 0; //Offset kiri dan kanan pada arah X
var offsetY = 0
; kembali; / /Kembalikan objek animasi
var thisX; //Posisi X dari lapisan klon saat ini
var iniY; //Posisi Y dari lapisan klon saat ini
var waktu
; //Kecepatan perpindahan
var langkahY;
//Inisialisasi informasi drag
/*
target initAimX x koordinat
target initAimY y koordinat
initOrgnX sumber drag x koordinat
initOrgnY sumber drag y koordinat
*/
//Dapatkan objek layer
fungsi getLayer(inAim,inSource,inClone)
{
tujuan = dokumen.getElementById(inAim);
sourceLayer = dokumen.getElementById(inSource);
cloneLayer
= dokumen.getElementById(inClone);
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX = initAimX
; aimY
= initAimY; orgnX = initOrgnX;
orgnY = initOrgnY;
//Setel posisi setiap lapisan awal
aim.style.pixelLeft =
aim.style.pixelTop = aimY;
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY;
cloneLayer.style.pixelLeft =
cloneLayer.style.pixelTop = orgnY
;
//Siapkan
fungsi drag BeforeDrag()
{
if (event.button != 1)
{
return;
}
cloneLayer.innerHTML = sourceLayer.innerHTML; //Salin konten sumber drag
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "aktif
menyeret =
}
//Fungsi tarik
OnDrag()
{
if(!menyeret)
{
return;
//
Perbarui posisi
event.returnValue = false;
cloneLayer.style.pixelLeft
= document.body.scrollLeft + event.clientX - offsetX;
= dokumen.body.scrollTop + event.clientY - offsetY
}
//Akhiri
fungsi menyeret EndDrag()
{
if (event.button != 1)
{
return
}
menyeret = false;
if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&
event.clientY >= aim.style.pixelTop && event.clientY <= (aim.style .pixelTop + aim.offsetHeight))
{
//Lapisan drag terletak di target dan secara otomatis diposisikan ke posisi target
sourceLayer.style.pixelLeft = aim.style.pixelLeft
sourceLayer.style.pixelTop = aim.style.pixelTop;
cloneLayer.className = "docked";
/*
** Setelah menyelesaikan ini, Anda dapat menggunakan xml untuk menyimpan posisi saat ini.
** Saat berikutnya pengguna masuk
, lapisan seret sumber akan diinisialisasi ke data dalam xml
*/
}
else
{
//Seret dan lepas Terletak di luar lapisan target, pulihkan posisi sumber seret
thisX = cloneLayer.style.pixelLeft;
thisY
= cloneLayer.style.pixelTop
offSetX = Math.abs(thisX - orgnX);
(iniY - orgnY);
waktu = 500;//Setel waktu animasi
stepX = Math.floor((offSetX/time)*20);
stepY
= Math.floor((offSetY/time)*20);
0)
langkahX = 2;
jika (langkahY == 0)
langkahY = 2;
//Mulai animasi pengembalian
moveStart(
)
;
fungsi moveStart()
{
kembali = setInterval("MoveLayer();",15
}
//Setel fungsi efek animasi yang dikembalikan
MoveLayer()
{
//Terletak di sisi kiri atas target
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style
.pixelTop += stepY;
//Jika perpindahan melebihi target, atur kecepatan ke pix dan mundur ke arah yang berlawanan.
pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1
}
//Jika koordinat pada sumbu X atau Y sama, tidak akan terjadi perpindahan
if(cloneLayer.style .pixelLeft == orgnX)
{
langkahX = 0
}
if(cloneLayer .style.pixelTop == orgnY)
{
langkahY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
Akhir
Bergerak()
;
//Terletak di kiri bawah target
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft +=
stepX;
if(cloneLayer.style .pixelLeft > orgnX)
{
langkahX = 1;
}
if(cloneLayer.style.pixelTop < orgnY)
{
langkahY = 1;
jika
(
cloneLayer.style.pixelLeft == orgnX)
{
langkahX = 0
;
(cloneLayer.style.pixelTop == orgnY)
{
langkahY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//Terletak di sisi kanan atas target
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -=stepX
;
;
jika(
cloneLayer.style .pixelLeft<
orgnX)
{
langkahX = 1;
}
if(cloneLayer.style.pixelTop
> orgnY)
{
langkahY
= 1
;
if(cloneLayer.style.pixelTop == orgnY)
{
langkahY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//Terletak di sisi kanan atas target
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= stepX
;
;
jika(cloneLayer.style .pixelLeft < orgnX)
{
langkahX
= 1;
}
if
(
cloneLayer.style.pixelTop < orgnY)
{
langkahY
= 1
;
if(cloneLayer.style.pixelTop == orgnY)
{
langkahY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//mencapai target
lain
{
EndMove(
)
;
//Hentikan pengembalian fungsi animasi
EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY
;
cloneLayer.style.pixelLeft = cloneLayer.style.pixelTop =
cloneLayer.className = "docked";
clearInterval(kembali)
;
//Fungsi drag utama
function startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag
document . onmousemove = OnDrag; //Jika cloneLayer digunakan di sini, konten di cloneLayer akan dipilih selama menyeret, dan beberapa bug akan muncul...
cloneLayer.onmouseup = EndDrag
}
//Panggil
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
Perlu dicatat bahwa:
1. Perlu ada tiga definisi div dalam HTML. Posisi style harus didefinisikan sebagai absolut di ketiga lapisan untuk mengontrol posisi.
1. Lapisan target (bidik), fungsi utamanya adalah untuk menentukan posisi dimana drag berlaku.
2. Tarik sumbernya (sourceLayer). Perhatikan pengaturan atribut unselectable = "off" (ini aneh, mengaturnya ke rentang aktif akan memilih konten lapisan selama proses menyeret)
3. Lapisan yang digunakan untuk menyalin (cloneLayer).
2. Panggilan fungsi
penjelasan parameter startDraging:
initAim nama lapisan target initSource seret nama sumber initClone nama lapisan yang digunakan untuk penyalinan
initAimX Koordinat sumbu x dari lapisan target initAimY Koordinat sumbu y dari lapisan target initOrgnX Koordinat x dari sumber drag initOrgnY Koordinat sumbu Y dari sumber drag
hanya diuji di IE. Komentar telah ditambahkan kodenya. Anda dapat menambahkan operasi penulisan xml setelah sumber drag mencapai target. Dan kemudian merekam data tata letak halaman yang ditentukan pengguna. Saya tidak terlalu puas dengan algoritma pengembalian animasi beberapa saran untuk perbaikan. Saat ini saya sedang mengembangkan seperangkat kontrol ajax berdasarkan asp.net2.0. Saya harap Anda dapat lebih banyak Berkomunikasi.
ps: Artikel pertama di taman blog saya .