js to achieve simple drag and drop

2010-09-25  来源:本站原创  分类:Java  人气:187 

The simplest implementation of js said drag and drop drag and drop, and now major, medium and small sites are essentially similar things, especially for pop-up layer drag, it is common mess. . .

In fact, for pop-up layer, the initial aim is very simple drag and drop is to pull level through to the content being blocked pop-up layer can be seen (of course, was constantly on the drag function is optimized so that the application of drag the other meaning, as the most typical custom igoogle page, drag and drop form to meet the user-defined content modules you want to order and location).

This article discusses the key is not drag and drop iGoogle effect, that is advanced articles, this is a drag and drop the "first order", such as title, to achieve the most simple drag and drop.
Here's the "most simple" drag and drop layers that do not take into account the stacking order, without regard to drag limit, do not consider such iGoogle's "dragTo" effect, etc.. . .

Well, ado, would let you see instances of it:

Drag me try ...
content ... Click here -> open because I was embedded directly in the page all of the code, together with third-party plug-blog garden because the code is efficient, there may be up and running is not very smooth

In fact, dragging the mouse on the three incidents involved, onmousedown, onmouseup, onmousemove, combined with access to the mouse position and the left and the top layer can achieve similar results.

When encoding, there are two areas of attention of a yes get the current style, currentStyle ie only in the next Effective , so the Fei ie we can getComputedStyle realize (of course, for this is not much need for the property of the situation You can also use the obj.style [key] want to get your current property value)

view sourceprint? 1 function getStyle (o, key) (return o.currentStyle? o.currentStyle [key]: document.defaultView.getComputedStyle (o, null) [key ]}//' currentStyle 'only for ie5.0 +

Another point is to obtain the mouse position in the use Dao event, event that something very strange, ie Following is a local variable, moz kernel is a global variable (not accurate, but easy to understand), so in time for Yao to the mouse position event to be a judge

view sourceprint? 1 bar.onmousedown = function (e) (

2 e = e? E: window.event; / / 'event' ie under the local variables, ff under the global variable

3 params.isDrag = true;

4 params._X = e.clientX; params._Y = e.clientY;


Well, pay attention to the above two points, combined with the right ideas can be a matter of fact, not difficult, the following reference code:

view sourceprint? 01 function getStyle (o, key) (return o.currentStyle? o.currentStyle [key]: document.defaultView.getComputedStyle (o, null) [key ]}//' currentStyle 'only for ie5.0 +


03 var drag = function (bar, target) (

04 var params = (

05 startLeft: 0,

06 startTop: 0,

07 _X: 0,

08 _Y: 0,

09 isDrag: false


11 if (getStyle (target, 'left')! = 'Auto') (params.startLeft = getStyle (target, 'left'))

12 if (getStyle (target, 'top')! = 'Auto') (params.startTop = getStyle (target, 'top'))

13 bar.onmousedown = function (e) (

14 e = e? E: window.event; / / 'event' ie under the local variables, ff under the global variable

15 params.isDrag = true;

16 params._X = e.clientX; params._Y = e.clientY;


18 document.onmouseup = function () (

19 params.isDrag = false;

20 if (getStyle (target, 'left')! = 'Auto') (params.startLeft = getStyle (target, 'left'))

21 if (getStyle (target, 'top')! = 'Auto') (params.startTop = getStyle (target, 'top'))


23 document.onmousemove = function (e) (

24 var e = e? E: window.event;

25 if (params.isDrag) (

26 var curX = e.clientX, curY = e.clientY, desL = curX-params._X + parseInt (params.startLeft), desT = curY-params._Y + parseInt (params.startTop);

27 target.style ['left'] = desL> = 0? DesL + 'px': 0;

28 target.style ['top'] = desT> = 0? DesT + 'px': 0;




Well, now, this almost over, similar to iGoogle's drag on the advanced papers, time will, the following combination of drag cite examples of integrated pop-up layer,

Parameter without any options box (the default high-200px, width 300px)
No mask box
The popup plugin I mentioned above, on, and also provides a source file to download, in which it is coupled with the drag effect
ps: Since the reasons for the code highlighting plug-in, there will be a white layer mask box, do not handle suspense. . .

  • js to achieve simple drag and drop 2010-09-25

    The simplest implementation of js said drag and drop drag and drop, and now major, medium and small sites are essentially similar things, especially for pop-up layer drag, it is common mess. . . In fact, for pop-up layer, the initial aim is very simp

  • Js popup (supports drag and drop, multiple pop automatically switch level) 2011-01-09

    Js popup Usage: 1, first import the css and js <script type="text/javascript" src="js/PopUpManager-compressed.js" ></script> <link href="css/PopUpLayer.css" type="text/css" rel="stylesheet"/

  • 学习drag and drop js实现代码经典之作 2014-03-07

    今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子, 合上书本自己写一个简化版本的.大约20分钟完成, 没有考虑兼容firefox.整个代码封装成一个对象 也是借鉴书中的风格.我觉得很好. Pro Javascript Techniques书中推荐的drag and drop 例子:http://boring.youngpup.net/2001/domdrag Drag [Ctrl+A 全选 注:如需引入外部J

  • [DnD] Swing Drag And Drop Analysis Notes 2010-04-23

    DnD (Drag And Drop) for the program's user friendliness is essential Common to a file directly dragged into the programs, and to drag item from one list to another list The most a few days learning Swing's DnD mechanism, has been a mess, a stunned bu

  • Eclipse drag and drop (Drag and Drop) (change) 2010-04-01

    Operating system is the most commonly used drag and drop movement of files to copy, drag and drop increased use of simple software. SWT also supports drag and drop, but more complicated programming. Figure 18.1 Schematic diagram of the realization of

  • 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

  • Flex using drag and drop 2010-09-05

    All Flex components support drag and drop, some subset of the components also drag and drop with other functions, as these components can be achieved adding a property to drag and drop. Achieved in the Flex drag and drop in the use of drag and drop m

  • flex drag and drop operation (b) 2010-11-04

    Easier to make money at home Manually add the drag-and-drop support In the last article in Flex, you already know there are some controls built-in drag-and-drop operations support, and relatively easy to achieve, but often have to complete this opera

  • flex drag and drop operations (a) 2010-11-04

    Easier to make money at home Visual development environment, the biggest feature is an application that allows you the choice by the mouse, mobile and flexible to handle objects on the screen. Flex Drag and Drop Manager can select an object (such as

  • JS to achieve local print and preview 2010-03-29

    JS to achieve local print and preview: The first is: JS to achieve a simple partial print page function preview (oper) ......{ if (oper <10 )......{ bdhtml = window.document.body.innerHTML; / / get the current page html code sprnstr ="<!-- star

  • Js to achieve with print and export to Excel 2010-04-05

    Printing can be achieved with the control, can also be saved as excel using POI to achieve, but if the current page only designated areas for print or export Excel can use js to achieve, or very simple. Save as Excel: function saveAsExcel(HeadName, D

  • WPF in RichTextBox support drag and drop the file 2010-07-22

    WPF in RichTextBox support drag and drop the file looks like not very friendly and spent a lot of his time, also attempted to get help through other channels, but no avail, has failed to achieve their goals, while depressed RichTextBox carefully read

  • Clipboard and OLE Drag and Drop 2010-08-05

    First, the traditional clipboard Traditional form of the clipboard is very simple, the basic idea is to replicate when the replication process to the global memory copy of a data object, open the clipboard, and empty the clipboard data which will be

  • Flex 3 Getting Started (18): Building an advanced user interface, drag and drop support added 2010-08-26

    In a typical visual development environment, you can select in the application and drag an object moving back and forth on the screen. Flex Drag and Drop Manager allows users to select an object, such as an element of List control, or a control such

  • Free Drag and Drop Javascript Class 2010-09-13

    Basic Drag and Drop new Dragdrop (( target drag element HTMLElemnt Required bridge specify which elements of the mouse when pressing start dragging, modal dialog box is used to achieve dragable whether the drag (true) by default dragX true / false fa

  • Drag and drop sorting of TreeGrid SmartGWT 2010-10-29

    Use ListGrid, when the need sorting, of course, can be used for moving down this button to do sorting. However, since SmartGWT mouse Drag and Drop support for sorting, why not do it. First, setCanReorderRecords (true), drag the mouse in order to supp

  • Examples of drag and drop files Adobe Air 2010-11-27

    Authors stress that, in the AIR drag and drop operation to use to achieve the label is DragManager, the principle is largely achieved the following steps: 1. When you drag a file to AIR applications, AIR applications by listening NativeDragEvent.NATI

  • 分享一个HTML5的drag and drop API实现的图片拖拽分组效果 2012-04-17

    日期:2012-4-17 来源:GBin1.com 在线演示 本地下载 今 天我们介绍HTML5的拖拽功能.基本目前所有的现代浏览器(Firefox,Chrome,Safari,或者Opera)都支持这个实用的功能.这意 味着我们可以考虑在我们的项目和网站中使用这个功能.更重要的是代码编写非常简单.我们这里将使用拖拽API开发一个图片的分组排序功能 ,希望能够给大家比较直观的使用感受.希望大家喜欢! HTML标签 <div class="albums"> <div c

  • 基于HTML5的Drag and Drop生成图片Base64信息 2014-12-19

    HTML5的Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的朋友会发

  • [Change] javascript Drag and Drop 2010-03-30

    <html> <head> <title> Drag-and-drop effect </title> <style> #idContainer{ border:10px solid #990000; width:600px; height:300px; } #idDrag{ border:5px solid #C4E3FD; background:#C4E3FD; width:50px; height:50px; margin:50px; }