您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)腳本div如何實(shí)現(xiàn)拖放功能的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
網(wǎng)頁(yè)上有很多拖曳的操作,比如拖動(dòng)樹(shù)狀列表,可拖曳的圖片等。
1.原生拖放實(shí)現(xiàn)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" > <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <style> .drag{ width: 200px; height: 200px; background-color: red; position: absolute; left:0; top:0; } </style> <script> $(function() { var _move = false;//判斷目標(biāo)對(duì)象書(shū)否處于移動(dòng)狀態(tài) var _x, _y;//鼠標(biāo)離控件左上角的相對(duì)x.y坐標(biāo) $('.drag').click(function(event) { }).mousedown(function(e) {//當(dāng)按下鼠標(biāo)左鍵時(shí) _move = true;//標(biāo)記移動(dòng)為true,開(kāi)始移動(dòng) _x = e.pageX - parseInt($('.drag').css('left'));//得到左上角的x的位置 _y = e.pageY - parseInt($('.drag').css('top'));//得到左上角的y的位置 $('.drag').fadeTo('20', 0.5);//單擊后開(kāi)始拖動(dòng) }); $(document).mousemove(function(e) {//監(jiān)聽(tīng)鼠標(biāo)移動(dòng) if(_move) { var x = e.pageX - _x;//計(jì)算移動(dòng)的距離 var y = e.pageY - _y; $('.drag').css({top:y, left:x}); } }).mouseup(function() { _move = false; $('.drag').fadeTo('fast', 1); }); }); </script> </head> <body> <div class="drag"></div> </body> </html>
2 jQuery UI draggable實(shí)現(xiàn)拖放
自行實(shí)現(xiàn)拖曳方法比較負(fù)責(zé),jQuery UI提供了可拖曳的事件,允許用戶(hù)非常簡(jiǎn)單的為一個(gè)div添加拖曳效果。
jQuery UI主要通過(guò)draggable事件來(lái)實(shí)現(xiàn)拖曳功能。
<script> $(document).ready(function(e) { $('.drag').draggable({cursor: 'move'}); $('#enable').click(function(e) { $('.drag').draggable('enable'); }); $('#disable').click(function(event) { $('.drag').draggable('disable'); }); $('#deatroy').click(function(event) { $('.drag').draggable('destroy'); }); }) </script> </head> <body> <button id="enable">enable</button> <button id="disable">disable</button> <button id="destroy">destroy</button> <div class="drag"> <p>請(qǐng)拖動(dòng)我!</p> </div> </body>
感謝各位的閱讀!關(guān)于“腳本div如何實(shí)現(xiàn)拖放功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。