[精讚] [會員登入]
309

Jquery+CSS div區塊的拖拉(drag and drop)效果

網頁想要做到拖拉區塊的功能,但又不想使用他人的插件或是 jquery-ui的話,怎麼做?

此文完整連結 http://n.sfs.tw/14873

複製連結 Jquery+CSS div區塊的拖拉(drag and drop)效果@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2020-12-29 12:59:04 最後編修
2020-12-22 13:27:33 By 張○○
 

自動目錄

網頁想要做到拖拉區塊的功能,但又不想使用他人的插件或是 jquery-ui的話,怎麼做?

此篇主要是參考 https://codepen.io/sun_kao/pen/DkFla 的範例修改,原範例的做法是物件用position:absolute此範例改position:fixed。

此功能主要是做個訊息框,只留下區塊的拖拉 drag and drop 的效果。

差別在於顯示的部分,margin-top 和 margin-left 有退縮 -200px。

HTML

<div id="centermsg" >
訊息欄 <div id="closemsg">X 關閉</div>
  <div id="msgbody">訊息本文
  </div>
</div>

CSS

#centermsg { 
   z-index:9999;
   position: fixed; 
   top:50%;
   left:50%; 
   margin-left:-200px; 
   margin-top:-200px; 
   background:black; 
   width:400px; 
   height:350px;
}
#msgbody { 
   background: black; 
   color:white;
}

說明

第3行 css的重點是 第三行position要設為絕對absolute或是固定fixed;

第6~7行 為了置中對齊,因此要退縮邊界為寬度的一半,就能置中。

JQUERY

var x,y,key;
$('#centermsg').bind({
    mousedown: function(event){
        var object = $(this).offset();
        x = event.pageX-object.left;
        y = event.pageY-object.top;
        key = true;  },
    mousemove: function (event){
        if(key){ $(this).css({'top':event.clientY-y+200, 'left':event.clientX-x+200 }); }},
    mouseup: function (){ key =false; }
});

說明:

第1行 設定外部變數,(x,y) 為滑鼠按下時在 <div id='centermsg'>中的相對位置,key 按下滑鼠mousedown啟動,mouseup時關閉移動的開關。

第5~6行 滑鼠位置- 左上角的位置取得按下時的div中相對位置

第9行 滑鼠在畫面上相對位置 - 相對位置 + 退縮的200 = 左上角的位置

 

參考資料

[1] https://codepen.io/sun_kao/pen/DkFla

 

 

你可能感興趣的文章

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

[Ckeditor4] 讀、寫與插入內容到欄位 Ckeditor4 提供非常多方法,可以插入、讀取和寫入到TEXTAREA中

Javascript/Jquery 建立、讀取、刪除cookie值 Javascript/Jquery 建立、讀取、刪除cookie值

[Javascript] 偵錯方式 (火狐中的javascript偵錯) javascript 並不是很容易偵錯(debug)的語言,但那是以前,現在有很多瀏覽器支持很多的工具,此文以火狐為例談談偵錯...

[Javascript] 陣列、陣列的操作 Javascript 的陣列操作:宣告、取值、賦值、插入或移除項目,檢查KEY、檢查是否為陣列等等

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

正則表達式:Email名稱防止連續輸入點(.)及下底線(_) Email的名稱中要允許特殊符號,但又不允許連續出現的正則表達式

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

Jquery+CSS div區塊的拖拉(drag and drop)效果 網頁想要做到拖拉區塊的功能,但又不想使用他人的插件或是 jquery-ui的話,怎麼做?

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[HP DL380G7] 生效啟動第3,4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3,4片網卡裝完系統後找不到,難道是壞了?要怎麼辦?

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

NETCRAFT發現你的網站及作業系統 NETCRAFT可以發現你的網站及作業系統

[NetBeans] 使用git複製別人的專案 NetBeans使用git複製別人的專案及版本控制