<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.asp tutorial X.cs" inherits= "Jquerydrag._default"%>
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title></title>
<script type= "text/web Effects" src= "Js/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.custom.min.js" ></script>
<script type= "Text/javascript" src= "Js/draggable.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Drag and Drop method
$ ("#imgdrag"). Draggable ({
Drag range
Containment: "#dragarea",
Start Event
Start:function (event, UI) {
StartDrag (event, UI);
},
End Event
Stop:function (event, UI) {
EndDrag (event, UI);
}
})
});
Start Event method
function StartDrag (event, UI) {
$ ("#startdraginfo"). HTML ("Start: Left:" + Ui.offset.left + "on:" + ui.offset.top);
}
End Event Method
function EndDrag (event, UI) {
$ ("#enddraginfo"). HTML ("End: Left:" + Ui.offset.left + "on:" + ui.offset.top);
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<%--draggable Reference Manual Http://docs.jquery.com/ui/api/1.8/draggable--%>
<%--Drag Range--%>
<div id= "Dragarea" style= "width:500px; height:500px; BORDER:1PX solid Blue ">
<%--records the information at the start of a drag--%>
<div id= "Startdraginfo" >
</div>
<%--records the information at the end of the drag--%>
<div id= "Enddraginfo" >
</div>
<br/>
<br/>
<%--the object being dragged--%>
</div>
</form>
</body>
Here's a summary
A jquery based drag-and-drop plug-in that is easy to use, and all operations are done by calling Draggable.
Basic usage:
$ (' #dd '). draggable ();
$ (' #dd '). Draggable ({handle: ' #title '});
Stop drag and drop: $ (' #dd '). Draggable ({disabled:true});
Resume drag and Drop: $ (' #dd '). Draggable ({disabled:false});
Draggable Drag is the first example of a JQ UI. Today, because of the limited ability to read English, some attributes are not clear, later supplemented.Initializing the frame, referencing the corresponding UI library file
JavaScript code
<link type= "text/css Tutorial" href= ". /development-bundle/themes/ui-lightness/ui.all.css "rel=" stylesheet "/>
<script type= "Text/javascript" src= ". /js/jquery-1.3.2.min.js "" ></script>
<script type= "Text/javascript" src= ". /development-bundle/ui/ui.core.js "></script>
<script type= "Text/javascript" src= ". /development-bundle/ui/ui.draggable.js "></script>
Performs the binding after the DOM finishes loading.
xml/html Code
<script type= "Text/javascript" >
$ (function () {
$ ("#draggable"). Draggable ();
});
</script>
Now the basic drag can be achieved. As long as you create one on the page to #draggable命名的标签就ok了Draggable method has a lot of parameters, today I have a blind touch to understand a few:
Addclasses:
If set to False, this class will not be added ui-draggable. When called. Draggable () Initializes hundreds of elements, you can optimize performance ("Bad Prince" offers translations)Appendto:
When dragging, elements that are passed or selected by the APPENDTO option will be used as containers for the draggable helper, and by default the helper is appended to the same container as the draggable element ("Bad Prince" provides translations, which I did not test successfully. In the study)Axis
Drag-and-drop actions only move up the corresponding axis. parameter x or YCancel:
Drag invalid When drag object is the label or object of Cancel said setContainment:
Restrict drag-and-drop objects in the parameter setting area, the parameter can be a label object or a [x1,y2,x2,y2] pixel areaCursor
Set drag action mouse styleCursorat:
Set drag action occurrence mouse position parameter is {cursorat: {left:5}}Delay
How many milliseconds after the drag-and-drop action delay response parameter millisecondsDistance
Drag-and-drop action left drag object after a certain pixel drag the occurrence of parameter valuesGrid:
The effect of the drag-and-drop action on its grid effect is to move the fixed pixel distance each time, and the parameter is [20, 20]Handle
Set drag-and-drop objects to implement drag-and-drop objects. The argument is that the selector is similar to a browser and can only be dragged through the top blue bar, but the entire browser is dragged.Helper:
Drag-and-drop action occurs when the original object does not move, copying an object to drag and drop event object at the end of the drag to save at the end of the position depends on the parameter ' original ', ' Clone ', function. Do not return a DOM tag when the parameter is a function.Iframefix:
Prevent the presence of iframes from causing drag-and-drop loss in midstreamOpacity:
Set the transparency parameters when dragging a floating-point type 1.00-0.00 the transparency back to the initial state after dragging endScroll:
Sets whether to allow dragging out of the front container (browser) display area when dragging objects are dragged (that is, auto-scrolls * about Auto-scrolls please see the explanation below). Set to False, the container window does not move the principal window with the collision when the object touches the border. Note that this has been tested by me and is set to false to produce a scroll bar.Scrollsensitivity:
Sets the response distance between the drag-and-drop object being dragged and the container colliding. Seemingly this explanation is not good to understand, popular say, is when you hit the border of how many pixel range occurs auto-scrolls event.Scrollspeed:
When a collision occurs between a drag object and a browser edge, the container moves the distance of the main window at a time.revert:
Sets whether drag-and-drop events take effect after execution, and if not, they are animated back to the drag object initialization position. parameter is a logical value or string ' valid ', ' invalid 'Revertduration:
When the revert event is executed, set the speed at which to animate the initialization position. parameter is a numeric millisecond. Modifying a property without setting the revert is meaningless.Snap
Drag object to set this property, drag objects are automatically adsorbed to each other when 2 drag objects are about to come into contact. Similar to the magnet effect or the alignment reference in the PS tutorial. parameter is a logical value and only 2 or more objects set this property to interact with each other.Snapmode:
Drag objects to each other's adsorption mode. Parameters are ' inner ', ' outer ', ' both '. The default value is both.Snaptolerance:
Drag-and-drop objects in the adsorption mode between the scope of the role can be understood as a magnet magnetic force, the parameters are pixel units.Stack:
When you have multiple drag-and-drop objects, you can use this parameter to set them as a group, and then within this parameter you can define the minimum z axis, which will no longer cascade on the original Z axis, but cascade sequentially according to the last click. A cascade similar to Windows Multiple folder windows. Parameter mode {stack: {group: ' div ', min:50}}.ZIndex Drag event when the z axis is changed to the corresponding parameter, drag and drop end, z-axis restore.
Note: "Aoto-scroll is automatic scrolling, which means that the container (browser) Scroll automatically extends the scroll bar and the screen looks like a collision direction when the object is colliding to the border."
Event:
Drag-and-drop there are 3 events, and 4 parameter details can be viewed directly from official AIP those without detailed instructions.
Basic parameter formulation
JavaScript code
$ ("#draggable"). Draggable ({opacity:0.35});
How do I get parameters?Component provides get and set methods to obtain and set parameters.
For example, set the transparency above:
JavaScript code
Getter
var opacity = $ ('. Selector '). draggable (' option ', ' opacity ');
Setter
$ ('. Selector '). draggable (' option ', ' opacity ', 0.35);
According to the instructions above, let's take another example.Function ($) {
$.fn.draggable = function (opts) {
Default parameter settings
var defaultsettings = {
Parent:document,//parent container
Target:this,//dragging objects when moving
Onmove:function (e) {//Drag handler function
$ (settings.target). CSS ({
LEFT:E.CLIENTX-DX,
Top:e.clienty-dy
});
},
Onfinish:function () {}//drag complete callback function
};var settings = $.extend ({}, DefaultSettings, opts);
var dx, DY, moveout;
Prevent text selection when dragging
This.bind ("Selectstart", function () {return false;});Record mouse relative position when mouse is pressed
This.mousedown (function (e) {
var t = $ (settings.target);
DX = E.clientx-parseint (T.css ("left"));
DY = E.clienty-parseint (t.css ("Top"));$ (settings.parent). MouseMove (move). Mouseo tutorial ut (out);
$ (). MouseUp (UP);
});Handling when the mouse is moved over the parent container
function Move (e) {
Moveout = false;
Settings.onmove (e);
}Handling when the mouse moves out of the parent container
function out (e) {
Moveout = true;
settimeout (function () {checkout (e);}, 100); Fine tune
}Drag and Drop end
function up (e) {
$ (settings.parent). Unbind ("MouseMove", move)-Unbind ("Mouseout", out);
$ (). Unbind ("MouseUp", up);
Settings.onfinish (e);
}function Checkout (e) {
Moveout && up (e);
}
};
}) (jquery);
Call method<script type= "Text/javascript"
$ (function () {
$ ("#k2"). Draggable () ;
});
</script>
<style type= "Text/css"
Div#k2 {
position:absolute;
left:0px;
top:0px;
border:1px Solid;
width:200px;
height:100px;
Background-color:blue;
}
</style><div id= "K1" >111</DIV>
<div id= "K2" >222</DIV>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
