jquery drag effect layer implementations

2010-11-28  来源:本站原创  分类:Web  人气:140 

jquery layer drag effect of the implementation methods:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery Layer dragging effect-k686 Green software   http://www.k686.com</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<h1><a href="http://www.k686.com/" title="k686 Green software  ">k686 Green software  </a></h1>

<style type="text/css">
.drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
</style>

<!-- Drag the module  -->
<div> This layer is to drag drop   ^_^ <br />
<a href="http://www.k686.com/" title="k686 Green software  ">k686 Green software  </a></div>

<script type="text/javascript">
//  Layer drag
$(function(){
        var _move=false;// Mobile markup
        var _x,_y;// The mouse away from the control position relative to the upper-left corner
    $(".drag").click(function(){
        //alert("click");// Click on the  ( Release after trigger  )
        }).mousedown(function(e){
        _move=true;
        _x=e.pageX-parseInt($(".drag").css("left"));
        _y=e.pageY-parseInt($(".drag").css("top"));
        $(".drag").fadeTo(20, 0.5);// Click start dragging and transparent display
    });
    $(document).mousemove(function(e){
        if(_move){
            var x=e.pageX-_x;// According to the mouse position when moving the calculated control in the upper left corner of the absolute position
            var y=e.pageY-_y;
            $(".drag").css({top:y,left:x});// Control to a new location
        }
    }).mouseup(function(){
    _move=false;
    $(".drag").fadeTo("fast", 1);// Release the mouse stops moving and recovery into opaque
  });
});
</script>

</body>
</html>
相关文章
  • jquery drag effect layer implementations 2010-11-28

    jquery layer drag effect of the implementation methods: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

  • jquery drag effect of implementation issues 2008-08-16

    With jquery achieve an object of the drag, although the achieved, but he's bad mood with its relentless, rapid up and down drag will be derailed, bug too much Oh, still using jquery drag that comes with cool. <html> <head> <meta http-equiv=

  • To achieve the kind of drag effect jquery.easywidgets.js examples of google 2010-01-19

    Mainly use the jquery.easywidgets.js straightforward plug-ins to achieve this effect Paste attachments, be preserved for future use. Learning can be found online about jquery.easywidgets There is also a more simple drag effect is also relatively simp

  • Beautiful drag effect 2010-04-02

    Beautiful drag effect http://www.brothercake.com/site/resources/scripts/dbx/

  • 15 Jquery Drag and Drop plugin 2010-04-16

    15 jQuery drag the plug-in allows you to move up the page with the mouse! $. Event.special.drag To achieve a simple drag functionality and compatibility! (Mb) ConteinersPlus ConteinersPlus jQuery is a powerful drag and drop plug-in, drag can be achie

  • Super simple js code can drag the layer 2010-07-04

    Transfer from: http://www.111cn.net/js_a/74/js+div+dl.htm Super simple js code can drag the layer <div onmousedown="Drag(this, event)"> </ div> <script> function Drag (o, e) ( var e = window.event | | e; var _x = e.offsetX | |

  • JavaScript can be written in a simple drag effect 2010-11-19

    Look at the js code function drag(target, event) { // Defined start dragging the mouse position ( Coordinates relative to window ) var startX = event.clientX; var startY = event.clientY; // Define the position of the elements to be dragged ( Coordina

  • Achieve the kind of drag effect jquery.easywidgets.js instance google 2010-03-06

    Main plug-ins to achieve this effect using jquery.easywidgets.js straightforward Posts attachment, be preserved for future use. Learning on-line search about jquery.easywidgets There is also a more simple drag effects are relatively simple plug-jquer

  • Jquery line of code to easily drag effect 2010-08-27

    $(document).ready( function() { $("#divPanel").easydrag(); } ); < div id = " divPanel " style = " width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px " > < div id =

  • JQuery easyUI drag effect applied to the scheduling 2010-10-27

    Recently made a hospital project, the project has a function of scheduling, the specific meaning is to a doctor or nurse came in a few weeks on duty out-patient or ward, dragging the company to achieve leadership require scheduling, just project the

  • jquery loading effect 2009-07-13

    Description: The user sign-on system, the system is still loading some resources (ie, no load finished, the corresponding user's actions can not be normal) then I would like to get hold of the mask effect, when the load exhausted mask disappeared. Ef

  • JS drag of data from one table to another table with drag drag effect 2010-06-28

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm2</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="C

  • Rails flot chart the trend line and the drag effect of adding 2010-07-12

    Flot is based on Jquery chart shows the plug-in. github have flot the wrapper to support calls and realistic graphics. Here are some examples of the use flot , Jonathan Leto added logarithmic axis support and released it to the world here with some e

  • JQuery EasyUI effect of the loading wait .... 2010-07-25

    Front has been talking EasyUI usage, I also recently used this thing, that this component which still have many, many shortcomings. For example, if you load a page with a pop-up box form, if the loading speed is slow, then will appear the following e

  • jquery拖动插件(jquery.drag)使用介绍 2014-06-17

    可以使用鼠标任意拖动列表项改变默认的位置,具体的实现如下(附演示),感兴趣的朋友可以学习下 <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Dynamic Drag'n Drop<

  • HTML in AJAX using jQuery imitation effect 2009-06-29

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>fck</TITLE> <META http-equiv="Content-Type" CONTENT="text/html; charset=utf-8" /> <script type="t

  • jquery igoogle effect 2010-10-22

    jqueryigoogle effect

  • android ---> picture drag effect (Gallery) 2010-11-19

    Is it still a little bit flashy effect of it. IPhone With this effect has attracted countless Apple fans, the Android platform can achieve this effect. To achieve this effect, you need a container to hold the Gallery displays the picture, here BaseAd

  • jQuery drag the tree instance 2010-03-08

    1, root node <ul> <li> <span> All group </span> <ul> <%=topGroupTree%> </ul> </li> </ul> 2, the value topGroupTree UsergroupInfo ugInfo = new UsergroupInfo(); RelationguInfo rInfo = new RelationguInfo(

  • javascript simple drag effect. 2010-08-10

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-