<label id="zgmvh"><acronym id="zgmvh"></acronym></label>
唐山網(wǎng)站建設(shè),唐山網(wǎng)站制作,唐山做網(wǎng)站,唐山網(wǎng)頁設(shè)計(jì),唐山網(wǎng)站優(yōu)化,唐山網(wǎng)絡(luò)公司,唐山400電話業(yè)務(wù) 24小時(shí)熱線：15031560143
關(guān)于我們
|
網(wǎng)站模版
|
支付方式
|
網(wǎng)站地圖
本站首頁
關(guān)于我們
新聞中心
網(wǎng)站報(bào)價(jià)
成功案例
400電話
聯(lián)系方式
首頁
> jquery拖拽效果 網(wǎng)站建設(shè)前端
jquery拖拽效果 網(wǎng)站建設(shè)前端
時(shí)間：2017/12/6 20:30:52
作者：tsccwl
人氣：
標(biāo)簽：
jquery拖拽效果
網(wǎng)站建設(shè)前端
為什么寫這個(gè)呢？
因?yàn)榻裉焱蝗唤拥竭@個(gè)需求，有點(diǎn)懵，很久沒有做過這個(gè)了。。。
本來打算找自己保存的資料，后來想了想，算了，重新寫一個(gè)吧
就有了這個(gè)
<script> $(document).ready(function(){ dragTc(); function dragTc(){ var _move=false; var _x,_y,_left,_top,maxX,maxY; $(document).on('mousedown',".drag-head",function(e){ e = e || event; if(e.target.tagName != "EM"){ e.preventDefault(); _move=true; var $box = $(this).parent(); _left = $box.offset().left - $(window).scrollLeft();//元素初始位置 _top = $box.offset().top - $(window).scrollTop(); _x=e.pageX;//光標(biāo)初始位置 _y=e.pageY; maxX = $(window).width() - $box.width(); maxY = $(window).height() - $box.height(); $box.addClass('mousethis').find('.drag-cont').fadeTo(20, 0.5);//點(diǎn)擊后開始拖動(dòng)并透明顯示 ,如果不要，可以不寫 }else{ $(this).parent().hide(); } }); $(document).mousemove(function(e){ e = e || event; if(_move){ e.preventDefault(); var x=e.pageX-_x+_left;//光標(biāo)位移量 var y=e.pageY-_y+_top; x = x < 0 ? 0 : (x > maxX ? maxX : x); y = y < 0 ? 0 : (y > maxY ? maxY : y); $(".mousethis").css({top:y,left:x, right: 'auto', bottom: 'auto','margin': 'auto'});//控件新位置 } }).mouseup(function(){ if(_move){ _move=false; $(".mousethis").find('.drag-cont').fadeTo("fast", 1);//松開鼠標(biāo)后停止移動(dòng)并恢復(fù)成不透明 $(".mousethis").removeClass('mousethis'); } }); } }); </script> <div id="gxbwkky" class="drag" style="position:fixed;width:400px;height:250px;background:#ccc;"> <h3 class="drag-head" style="margin:0;padding:15px;text-align:center;background:#f1f2f6;cursor:move;">拖拽頭<em class="drag-close" style="float:right;cursor:default;">x</em></h3> <div id="aswvkss" class="drag-cont" style="padding:15px;"> 這里面可拖拽 這里面可拖拽 這里面可拖拽 這里面可拖拽 這里面可拖拽 </div> </div>
提示：復(fù)制和保存代碼功能在FF下無效。
上一篇：
遵化商務(wù)局網(wǎng)站建設(shè)開發(fā)完成
下一篇：
唐山網(wǎng)站建設(shè)之a(chǎn)sp教程：提高字符串的連接符&的效率
地址：中國.唐山市路北區(qū)尚座即理工大學(xué)對面 中國.河北唐山遵化市
唐山做網(wǎng)站
本站網(wǎng)址：9899v.com聯(lián)系電話：0315-6025099 建站熱線：15031560143
冀ICP備12014317號-1 版權(quán)所有:唐山長城網(wǎng)絡(luò) 9899v.com
