2. 程式人生 > >利用JQ實現簡單的拖曳效果

利用JQ實現簡單的拖曳效果

阿新 • • 發佈：2019-02-03
$(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'); }); }, };

相關推薦

利用JQ實現簡單的拖曳效果

$(function(){ //出入允許拖拽節點的父容器，一般是ul外層的容器 drag.init('container'); }); //拖拽 var drag = { class_name : null, //允許放置的容器 permitDrag : fals

利用JS實現簡單的瀑布流效果

color position func 如何實現 利用 無限 bar 拓展 復制代碼 一.瀑布流之準備工作 　　 首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地

用jq實現簡單輪播

cti 標簽 function radi har mil ott ava 懸停 一個簡單的實例： css代碼： <style type="text/css">@charset "utf-8";*{ padding:0px; border:

利用css實現hover動態效果

idt form 想要 utf-8 屬性 doc lin linear nbsp .font em:hover { font-size: 2em } .font strong:hover { font-weight: normal } .font span:hover {

JQ實現吸頂效果代碼

簡單 scroll gpo function fixed 實現 win scrolltop 默認 吸頂下過代碼跟簡單幾行代碼就可以了 如果滾動的軍力大於100，就改變導航的定位方式，否則就默認 $(function(){ $(window).scroll(

jq實現動態粒子效果

tex ret padding 粒子 proto scrip rip [] 3D 在線上看到別人做的動態粒子，哇，太炫了，我也來試一試。 <!DOCTYPE html><html> <head> <meta charset="UT

Python基礎程式設計：利用列表實現簡單的先進後出、先進先出

i = []#定義空白列表 def push(a):#定義增加函式 i.append(a) def view():#定義列印函式 print(i) while True: print('請輸入你的操作：') print('push:u')#增加元素 print

DL之RNN：基於TF利用RNN實現簡單的序列資料型別(DIY序列資料集)的二分類(線性序列&隨機序列)

DL之RNN：基於TF利用RNN實現簡單的序列資料型別(DIY序列資料集)的二分類(線性序列&隨機序列) 序列資料型別&輸出結果 1、test01：training_iters = 1000000 (32, 20, 1) [[0.336], [

利用bootstrap實現圖片Carousel效果

span per inner boot 頭文件 app cat carousel inter 引入頭文件： <link rel="stylesheet" href="bootstrap.min.css"> <link rel="styl

利用python實現簡單詞頻統計、構建詞雲

1、利用jieba分詞，排除停用詞stopword之後，對文章中的詞進行詞頻統計，並用matplotlib進行直方圖展示 # coding: utf-8 import codecs import matplotlib.pyplot as plt import jieba # import sys #

【javaweb】JQ實現簡單的註冊頁面資料校驗（究極版）

需求：前面寫了一個簡單的表單檢驗，需要使用者提交資訊後才會對錶單資訊進行檢驗，下面我們增加對使用者的提供友好提示，即輸入時就為表單資訊進行檢驗，並提供提示資訊。 步驟分析：1. 匯入JQ的檔案               &n

續（利用tensorflow實現簡單的卷積神經網路-對程式碼中相關函式介紹）——遷移學習小記（三）

  上篇文章對cnn進行了一些介紹，附了完整小例子程式碼，介紹了一部分函式概念，但是對我這樣的新手來說，程式碼中涉及的部分函式還是無法一下子全部理解。於是在本文中將對程式碼中使用的函式繼續進行一一介紹。 具體程式碼見上一篇（二） 一、 #定義輸入的placehoder，x是特徵

利用tensorflow實現簡單的卷積神經網路——遷移學習小記（二）

一、什麼是神經網路（CNN）     卷積神經網路（Convolutional Neural Network，簡稱CNN），是一種前饋神經網路，人工神經元可以影響周圍單元，可以進行大型影象處理。卷積神經網路包括卷積層和池化層。卷積神經網路是受到生物思考方式的啟發的MLPs（多

利用tensorflow實現簡單的卷積神經網路

一、什麼是神經網路（CNN）     卷積神經網路（Convolutional Neural Network，簡稱CNN），是一種前饋神經網路，人工神經元可以影響周圍單元，可以進行大型影象處理。卷積神經網路包括卷積層和池化層。卷積神經網路是受到生物思考方式的啟發的MLPs（

利用python實現簡單的socket服務端和客戶端

服務端： #!/usr/bin/python3 #python version 3.7 import socket so = socket.socket(socket.AF_INET,socket.SOCK_STREAM,socket.IPPROTO_TCP) address = ("127

利用python實現簡單的http和https伺服器

http伺服器程式碼： #!/usr/bin/python3 #python version 3.7 import sys from http import server from http.server import SimpleHTTPRequestHandler if sys.ar

DL之RNN：基於TF利用RNN實現簡單的序列資料型別(DIY序列資料集)的二分類(線性序列&隨機序列)

DL之RNN：基於TF利用RNN實現簡單的序列資料型別(DIY序列資料集)的二分類(線性序列&隨機序列) 輸出結果 1、test01：training_iters = 1000000 (3

利用Postman實現簡單的自動化測試

1. 關於tests[]斷言  對於系統整套介面的測試最好是建立系統相關的Collection，便於以後測試，測試指令碼採用的是JavaScript語法編寫，指令碼主要寫的位置在Pre-request Script和Tests兩個欄目中，Pre-request

利用佇列實現簡單的消費與生產任務

import java.util.ArrayList; import java.util.List; public class MyQueue{ private final Object lock = new Object(); private int m

使用CSS3偽類選擇器實現簡單手風琴效果，與其功能的介紹

1.展示 2.原理 主要使用了C3選擇器中的兩個： ①：不（）：不包含，如DIV：否（。測試），就是DIV中選中不包含有試驗類的，例如可以配合E：否（：最後的型）來排除掉最後一個元素並選中剩餘的; ②：目標：目標的ID變為的location.hash的值時，也就是錨點選中它時選