广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

jQuery 完成DOM原素拖动互换部位,

日期:2021-02-18 浏览:
jQuery 完成DOM原素拖动互换部位,
关注度5 评价 279  网民共享于:  :01 访问数40003次
title jQuery 拖动互换原素的部位 /title meta name= viewport content= width=device-width, initial-scale=1.0 !-- 引进 Bootstrap -- !-- 新 Bootstrap 关键 CSS 文档 -- link href= twitter-bootstrap/3.3.7/css/bootstrap.min.css rel= stylesheet link rel= stylesheet type= text/css href= ../css/exchange-position.css / !-- Jquery 3.5 -- script src= npm/.1/dist/jquery.min.js integrity= sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0= crossorigin= anonymous /script script src= ../js/exchange-position.js type= text/javascript charset= utf-8 /script !-- HTML5 Shiv 和 Respond.js 用以让 IE8 适用 HTML5原素和新闻媒体查寻 -- !-- 留意: 假如根据 file:// 引进 Respond.js 文档,则该文档没法见效果 -- !--[if lt IE 9] script src= libs/html5shiv/3.7.0/html5shiv.js /script script src= libs/respond.js/1.3.0/respond.min.js /script ![endif]-- /head body div >

css 编码:

#panelsBox div .panel{
 position: relative;

js 编码:

/**
 * 拖动控制面板 到某一控制面板的部位,互换2个控制面板部位
 * 若沒有到随意一个控制面板部位,则被拖动控制面板回原部位
$(function(){
 //1.监视 mousedown 恶性事件
 $( #panelsBox ).on('mousedown','.panel',function(e){
 var target_index = $(this).parent().attr( data-index //被拖拽控制面板原素部位
 var targetX = e.pageX - parseInt($(this).css( left ));
 var targetY = e.pageY - parseInt($(this).css( top ));
 $(this).fadeTo(20, 0.5); //点一下后刚开始拖拽并全透明
 $(this).css( z-index ,100); //设定优先选择展现
 //2.监视当今被拖动的控制面板的移动恶性事件:电脑鼠标移动到哪里,相对控制面板的css操纵显示信息到哪里
 $(this).mousemove(function(e){
 var x = e.pageX - targetX; //移动时依据电脑鼠标部位测算控制面板原素左上方的相对性部位
 var y = e.pageY - targetY;
 $(this).css({top:y,left:x}); //设定控制面板原素新部位
 }).mouseup(function(e){
 //3.监视电脑鼠标松掉恶性事件:互换控制面板原素,并将父级data-index换为原先的值
 $(this).fadeTo( fast , 1); //终止移动并修复成不全透明
 $(this).css( z-index ,0); //展现优先选择级减少
 //电脑鼠标松掉相匹配的控制面板原素的父div相匹配data-index
 var exchangeElem = $(document.elementFromPoint(e.pageX,e.pageY)).parents( .panel 
 if(exchangeElem.length 0){
 var exchange_index = $(exchangeElem[0]).parent( div ).attr( data-index 
 var device_id_target = $(exchangeElem[0]).parent( div ).attr( data-device-id 
 device_id_target = device_id_target == undefined? :device_id_target;
 if(target_index != exchange_index){
 //互换控制面板原素
 $( #panelsBox ).children( div[data-index= + target_index + ] ).empty().append(exchangeElem[0]);
 $( #panelsBox ).children( div[data-index= + exchange_index + ] ).empty().append(this);
 $( #panelsBox ).children( div[data-index= + exchange_index + ] ).children( .panel ).css({'top': 0px ,'left': 0px ,'z-index':0});
 //互换data-index
 $( #deviceList ).children( div[data-index= + target_index + ] )
 attr( data-index ,exchange_index);
 $(document.elementFromPoint(e.pageX,e.pageY)).parents( .panel ).parent()
 .attr( data-index ,target_index);
 }else{
 //回到原部位
 $(this).css({'top': 0px ,'left': 0px ,'z-index':0});
 }else{
 //回到原部位
 $(this).css({'top': 0px ,'left': 0px ,'z-index':0});

dengb.TechArticlejQuery 完成DOM原素拖动互换部位, 完成流程 源代码 html 编码: !DOCTYPE htmlhtmlheadmeta charset=utf-8titlejQuery 拖动互换原素的部位/titlemeta name=viewpor...



网站知识

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系