jQuery实现简单的拖曳效果
本文主要给大家介绍了关于利用jQuery实现简单的拖曳效果的相关资料，最近发现一个网站的拖拽效果挺好的,个人觉得是一种不错的用户体验,抽空研究了一下，需要的朋友可以参考借鉴，下面随着小编来一起看看详细的介绍吧。
前言
本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
提出问题
如何实现将一个盒子里的元素拉到另外一个盒子里？
实现思路
此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。
操作设计的节点有：原节点，临时节点，新节点
节点的移动涉及事件e的坐标
操作元素使用JQUERY
代码实现
相应的注释在文中已有体现，请认真观看，你可以理解的。
先定义一个对象 drag，包含拖曳需要用到的参数
定义初始化 init 函数，监听各种鼠标事件
mousedown 事件：克隆一个临时节点。记录鼠标点击位置与节点的位置的X,Y差值，设置克隆副本的样式并在原容器中添加这个副本
mousemove 事件：判断鼠标的相对位移，设置副本绝对位置的XY,并对鼠标移出浏览器的情况进行处理；对三个UL进行遍历，在不是原容器的情况下，判断鼠标位置是否处于其他容器的范围内，如果是，修改鼠标当前容器的样式。
mouseup 时间：移除临时节点。对三个UL进行遍历，在不是原容器的情况下，判断鼠标位置是否处于其他容器的范围内，如果是，在该容器下加入新节点，原容器删除原节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
.container ul{
width: 350px;
padding: 15px;
min-height:300px;
background-color:#FFFFF0;
margin:20px;
display: inline-block;
border-radius: 5px;
border: 1px solid #bbb;
}
.container ul li{
display: block;
float: left;
width: 350px;
height: 35px;
line-height: 35px;
border-radius: 4px;
margin: 0;
padding: 0;
list-style: none;
background-color:#EED2EE;
margin-bottom:10px;
-moz-user-select: none;
user-select: none;
text-indent: 10px;
color: #555;
}
</style>
</head>
<body>
<p class="container">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
<ul></ul>
<ul></ul>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script type="text/javascript">
$(function(){
//出入允许拖拽节点的父容器，一般是ul外层的容器
drag.init('container');
});
//拖拽
var drag = {
class_name : null, //允许放置的容器
permitDrag : false, //是否允许移动标识
_x : 0, //节点x坐标
_y : 0, //节点y坐标
_left : 0, //光标与节点坐标的距离
_top : 0, //光标与节点坐标的距离
old_elm : null, //拖拽原节点
tmp_elm : null, //跟随光标移动的临时节点
new_elm : null, //拖拽完成后添加的新节点
//初始化
init : function (className){
//允许拖拽节点的父容器的classname(可按照需要，修改为id或其他)
drag.class_name = className;
//监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
$('.' + drag.class_name).on('mousedown', 'ul li', function(event){
//当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
drag.permitDrag = true;
//获取到拖拽的原节点对象
drag.old_elm = $(this);
//执行开始拖拽的操作
drag.mousedown(event);
return false;
});
//监听鼠标移动
$(document).mousemove(function(event){
//判断拖拽标识是否为允许，否则不进行操作
if(!drag.permitDrag) return false;
//执行移动的操作
drag.mousemove(event);
return false;
});
//监听鼠标放开
$(document).mouseup(function(event){
//判断拖拽标识是否为允许，否则不进行操作
if(!drag.permitDrag) return false;
//拖拽结束后恢复标识到初始状态
drag.permitDrag = false;
//执行拖拽结束后的操作
drag.mouseup(event);
return false;
});
},
//按下鼠标 执行的操作
mousedown : function (event){
//1.克隆临时节点，跟随鼠标进行移动
drag.tmp_elm = $(drag.old_elm).clone();
//2.计算 节点 和 光标 的坐标
drag._x = $(drag.old_elm).offset().left;
drag._y = $(drag.old_elm).offset().top;
var e = event || window.event;
drag._left = e.pageX - drag._x;
drag._top = e.pageY - drag._y;
//3.修改克隆节点的坐标，实现跟随鼠标进行移动的效果
$(drag.tmp_elm).css({
'position' : 'absolute',
'background-color' : '#FF8C69',
'left' : drag._x,
'top' : drag._y,
});
//4.添加临时节点
tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
drag.tmp_elm = $(tmp).find(drag.tmp_elm);
$(drag.tmp_elm).css('cursor', 'move');
},
//移动鼠标 执行的操作
mousemove : function (event){
//2.计算坐标
var e = event || window.event;
var x = e.pageX - drag._left;
var y = e.pageY - drag._top;
var maxL = $(document).width() - $(drag.old_elm).outerWidth();
var maxT = $(document).height() - $(drag.old_elm).outerHeight();
//不允许超出浏览器范围
x = x < 0 ? 0: x;
x = x > maxL ? maxL: x;
y = y < 0 ? 0: y;
y = y > maxT ? maxT: y;
//3.修改克隆节点的坐标
$(drag.tmp_elm).css({
'left' : x,
'top' : y,
});
//判断当前容器是否允许放置节点
$.each($('.' + drag.class_name + ' ul'), function(index, value){
//获取容器的坐标范围 (区域)
var box_x = $(value).offset().left; //容器左上角x坐标
var box_y = $(value).offset().top; //容器左上角y坐标
var box_width = $(value).outerWidth(); //容器宽
var box_height = $(value).outerHeight();//容器高
//给可以放置的容器加背景色
if(e.pageX > box_x && e.pageX < box_x+box_width && e.pageY > box_y && e.pageY < box_y+box_height){
//判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
if($(value).offset().left !== drag.old_elm.parent().offset().left
|| $(value).offset().top !== drag.old_elm.parent().offset().top){
$(value).css('background-color', '#FFEFD5');
}
}else{
//恢复容器原背景色
$(value).css('background-color', '#FFFFF0');
}
});
},
//放开鼠标 执行的操作
mouseup : function (event){
//移除临时节点
$(drag.tmp_elm).remove();
//判断所在区域是否允许放置节点
var e = event || window.event;
$.each($('.' + drag.class_name + ' ul'), function(index, value){
//获取容器的坐标范围 (区域)
var box_x = $(value).offset().left; //容器左上角x坐标
var box_y = $(value).offset().top; //容器左上角y坐标
var box_width = $(value).outerWidth(); //容器宽
var box_height = $(value).outerHeight();//容器高
//判断放开鼠标位置是否想允许放置的容器范围内
if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
//判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
if($(value).offset().left !== drag.old_elm.parent().offset().left
|| $(value).offset().top !== drag.old_elm.parent().offset().top){
//向目标容器添加节点并删除原节点
tmp = $(drag.old_elm).clone();
var newObj = $(value).append(tmp);
$(drag.old_elm).remove();
//获取新添加节点的对象
drag.new_elm = $(newObj).find(tmp);
}
}
//恢复容器原背景色
$(value).css('background-color', '#FFFFF0');
});
},
};
</script>
</body>
</html>项目demo 请点击这里。
相关推荐：
Atas ialah kandungan terperinci jQuery实现简单的拖曳效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih
Apr 03, 2024 am 08:13 AM
Anda mungkin menghadapi masalah garis hijau yang muncul pada skrin telefon pintar anda Walaupun anda tidak pernah melihatnya, anda mesti melihat gambar berkaitan di Internet. Jadi, pernahkah anda menghadapi situasi di mana skrin jam tangan pintar bertukar menjadi putih? Pada 2 April, CNMO mendapat tahu daripada media asing bahawa seorang pengguna Reddit berkongsi gambar di platform sosial, menunjukkan skrin jam tangan pintar siri Samsung Watch bertukar menjadi putih. Pengguna menulis: "Saya sedang mengecas apabila saya pergi, dan apabila saya kembali, ia adalah seperti ini. Saya cuba untuk memulakan semula, tetapi skrin masih seperti ini semasa proses mulakan semula skrin jam tangan pintar Samsung Watch." Pengguna Reddit tidak menyatakan model khusus. Walau bagaimanapun, jika dilihat dari gambar, ia sepatutnya Samsung Watch5. Sebelum ini, seorang lagi pengguna Reddit turut melaporkan
Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara
Mar 28, 2024 am 11:11 AM
Bercakap tentang ASSASSIN, saya percaya pemain pasti akan memikirkan pembunuh utama dalam "Assassin's Creed". casis domestik/bekalan kuasa/penyejukan yang terkenal Siri ASSASSIN radiator penyejuk udara utama daripada jenama perkakas DeepCool bertepatan antara satu sama lain. Baru-baru ini, produk terbaharu siri ini, ASSASSIN4S, telah dilancarkan "Assassin in Suit, Advanced" membawakan pengalaman penyejukan udara baharu kepada pemain maju. Penampilannya penuh dengan perincian. Radiator Assassin 4S menggunakan struktur menara berkembar + reka bentuk terbina dalam kipas tunggal warna untuk memenuhi warna yang berbeza
Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos
Apr 17, 2024 pm 05:07 PM
Dengan ketibaan musim bunga, segala-galanya pulih dan segala-galanya penuh dengan daya hidup dan kecergasan. Dalam musim yang indah ini, bagaimana untuk menambah sentuhan warna pada kehidupan rumah anda? Projektor Haqu H2, dengan reka bentuk yang indah dan keberkesanan kos yang tinggi, telah menjadi keindahan yang sangat diperlukan pada musim bunga ini. Projektor H2 ini padat tetapi bergaya. Sama ada diletakkan di atas kabinet TV di ruang tamu atau di sebelah meja sisi katil di dalam bilik tidur, ia boleh menjadi landskap yang indah. Badannya diperbuat daripada tekstur matte putih susu Reka bentuk ini bukan sahaja menjadikan projektor kelihatan lebih maju, tetapi juga meningkatkan keselesaan sentuhan. Bahan bertekstur kulit kuning air menambah sentuhan kemesraan dan keanggunan pada penampilan keseluruhan. Gabungan warna dan bahan ini bukan sahaja menepati trend estetik rumah moden, tetapi juga boleh diintegrasikan ke dalam
Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat
Mar 28, 2024 pm 03:20 PM
Dengan saiznya yang padat, platform ITX telah menarik ramai pemain yang mengejar keindahan terunggul dan unik Dengan peningkatan proses pembuatan dan kemajuan teknologi, kedua-dua kad grafik siri Core dan RTX40 generasi ke-14 Intel boleh menggunakan kekuatan mereka pada platform ITX, dan. pemain juga Terdapat keperluan yang lebih tinggi untuk bekalan kuasa SFX. Penggemar permainan Huntkey telah melancarkan bekalan kuasa siri MX baharu Dalam platform ITX yang memenuhi keperluan berprestasi tinggi, bekalan kuasa modul penuh MX750P mempunyai kuasa penarafan sehingga 750W dan telah lulus pensijilan tahap platinum 80PLUS. Di bawah kami bawakan penilaian bekalan kuasa ini. Bekalan kuasa modul penuh Huntkey MX750P menggunakan konsep reka bentuk yang ringkas dan bergaya Terdapat dua model hitam dan putih untuk dipilih oleh pemain kedua-duanya menggunakan rawatan permukaan matte dan mempunyai tekstur yang baik dengan fon perak kelabu dan merah.
Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja.
Apr 23, 2024 am 08:04 AM
Model besar yang boleh menganalisis kandungan PDF, halaman web, poster dan carta Excel secara automatik tidak terlalu mudah untuk pekerja. Model InternLM-XComposer2-4KHD (disingkat IXC2-4KHD) yang dicadangkan oleh Shanghai AILab, Universiti China Hong Kong dan institusi penyelidikan lain menjadikan perkara ini menjadi kenyataan. Berbanding dengan model besar berbilang modal lain yang mempunyai had resolusi tidak lebih daripada 1500x1500, kerja ini meningkatkan imej input maksimum model besar berbilang mod kepada lebih resolusi 4K (3840x1600) dan menyokong sebarang nisbah aspek dan 336 piksel kepada 4K Perubahan resolusi dinamik. Tiga hari selepas dikeluarkan, model itu mengungguli senarai populariti model menjawab soalan visual HuggingFace. Mudah dikendalikan
Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik
Mar 06, 2024 pm 04:40 PM
Dalam era perkembangan teknologi yang pesat sekarang, komputer riba telah menjadi alat yang sangat diperlukan dan penting dalam kehidupan dan pekerjaan harian manusia. Bagi pemain yang mempunyai keperluan prestasi tinggi, komputer riba dengan konfigurasi berkuasa dan prestasi cemerlang boleh memenuhi keperluan teras tegar mereka. Dengan prestasi cemerlang dan reka bentuk yang menakjubkan, komputer notebook Colorful Hidden Star P15 telah menjadi peneraju masa depan dan boleh dipanggil model buku nota tegar. Colorful Hidden Star P1524 dilengkapi dengan pemproses Intel Core i7 generasi ke-13 dan GPU RTX4060Laptop Ia menggunakan gaya reka bentuk kapal angkasa yang lebih bergaya dan mempunyai prestasi yang cemerlang dalam butiran. Mari kita lihat dahulu ciri-ciri buku nota ini. Supreme dilengkapi dengan pemprosesan Intel Core i7-13620H
Skrin bagus untuk bermain permainan Analisis ringkas skrin iQOO Neo9S Pro+
Jul 19, 2024 pm 03:53 PM
Dalam pasaran telefon pintar hari ini, kualiti skrin telah menjadi salah satu petunjuk utama untuk mengukur prestasi keseluruhan telefon mudah alih. Siri Neo iQOO sentiasa komited untuk memberikan pengguna pengalaman permainan yang sangat baik dan keseronokan visual Produk terbaharu iQOO Neo9SPro+ menggunakan "Three Good Eye Protection Gaming Screen. Seterusnya, mari lihat kualiti skrin ini. iQOO Neo9S Pro+ dilengkapi dengan skrin langsung e-sukan 1.5 KOLED, yang menyokong kadar penyegaran adaptif LTPO perdana dari 1Hz hingga 144Hz, yang bermaksud ia boleh mencapai keadaan siap sedia kuasa ultra rendah apabila memaparkan kandungan statik, dan juga boleh menjadi pintar semasa permainan . Tukar kepada dinamik tinggi daripada 90Hz kepada 144Hz
Pengalaman satu kanta sebenar dengan lensa NIKKOR Z 28-400mm f/4-8 VR
Mar 28, 2024 pm 02:54 PM
Ramai peminat fotografi suka menggunakan kanta Keperluan penggambaran mereka sangat berubah-ubah, jadi apabila bercakap tentang pemilihan kanta, mereka lebih suka produk yang lebih serba boleh, yang biasa kita panggil "satu lensa untuk menakluk dunia". Kebetulan Nikon telah melancarkan produk baharu, lensa NIKKOR Z28-400mmf/4-8VR, lensa "satu kanta yang boleh menakluk dunia" benar. Lensa meliputi dari hujung sudut lebar 28mm hingga hujung telefoto 400mm Dilengkapi dengan kamera Z-mount, ia boleh merakam julat tema fotografi yang sangat kaya dan membawa perubahan perspektif yang kaya. Hari ini, kami akan bercakap dengan anda tentang lensa NIKKOR Z28-400mmf/4-8VR ini melalui pengalaman penggunaan terbaru kami. NIKKOR Z28-400mmf/4-8VR ialah
