Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > jquery implements simple drag-and-drop effect example compatible with all mainstream browsers (optimization)_jquery

jquery implements simple drag-and-drop effect example compatible with all mainstream browsers (optimization)_jquery

WBOY
Release： 2016-05-16 17:30:53
Original
945 people have browsed it

Compared with previous article, the drag and drop effect has been optimized.
js code: fun.js

Copy code The code is as follows:

_MoveObj = null ;//All variables, used to represent the current div
z_index = 0; //Z direction
jQuery.fn.myDrag=function(){
_IsMove = 0; // Whether to move 1. Move
_MouseLeft = 0; //div left coordinates
_MouseTop = 0; //div top coordinates
$(document).bind("mousemove",function(e){
if(_IsMove== 1){
$(_MoveObj).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
}
}).bind("mouseup",function( ){
_IsMove=0;
$(_MoveObj).removeClass("downMouse");
});
return $(this).bind("mousedown",function(e){
_IsMove=1;
_MoveObj = this;
var offset =$(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e.pageY - offset.top;
z_index ;
_MoveObj.style.zIndex=z_index;
$(_MoveObj).addClass("downMouse");
});
}

html code:
Copy code The code is as follows:




demo.htm




Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved