login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Drag And Drop

Offline ozzyos545 - 23/09/2008 15:13
Avatar van ozzyos545Nieuw lid Hallo,

Ik heb vanaf een site een gratis DragnDrop script gehaald, en ik probeerde er een scriptje mee te maken. Het doel is dat als een box in de box ('Drop some boxes in me') terecht komt, deze zijn absolute status behoudt, en dus niet naar linksboven slide.

Zie voorbeeld hier: http://www.dhtm...rop-2.html

Ik heb wel al eens zoiets voor elkaar gekregen, alleen ging hij dan ook niet meer sliden in de linkerbox, dit moet hij dus wel blijven doen.

Javascript:
  1. /************************************************************************************************************
  2.  
  3. CUSTOM DRAG AND DROP SCRIPT
  4. This script is a part of DHTMLSuite for application which will be released before christmas 2006.
  5. (C) www.dhtmlgoodies.com, August 2006
  6.  
  7. This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
  8.  
  9. Terms of use:
  10. Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse
  11.  
  12. Thank you!
  13.  
  14. www.dhtmlgoodies.com
  15. Alf Magne Kalleland
  16.  
  17. ************************************************************************************************************/
  18.  
  19. /************************************************************************************************************
  20. *
  21. * Global variables
  22. *
  23. ************************************************************************************************************/
  24.  
  25. var standardObjectsCreated = false; // The classes below will check this variable, if it is false, default help objects will be created
  26. var clientInfoObj; // Object of class DHTMLgoodies_clientInfo
  27. var dhtmlSuiteConfigObj = false; // Object of class DHTMLgoodies_config
  28. var dhtmlSuiteCommonObj; // Object of class DHTMLgoodies_common
  29.  
  30. // {{{ DHTMLgoodies_createStandardObjects()
  31. /**
  32.  * Create objects used by all scripts
  33.  *
  34.  * @public
  35.  */
  36.  
  37. function DHTMLgoodies_createStandardObjects()
  38. {
  39. clientInfoObj = new DHTMLgoodies_clientInfo(); // Create browser info object
  40. clientInfoObj.init();
  41. if(!dhtmlSuiteConfigObj){ // If this object isn't allready created, create it.
  42. dhtmlSuiteConfigObj = new DHTMLgoodies_config(); // Create configuration object.
  43. dhtmlSuiteConfigObj.init();
  44. }
  45. dhtmlSuiteCommonObj = new DHTMLgoodies_common(); // Create configuration object.
  46. dhtmlSuiteCommonObj.init();
  47. }
  48.  
  49. /************************************************************************************************************
  50. * Configuration class used by most of the scripts
  51. *
  52. * Created: August, 19th, 2006
  53. * Purpose of class: Store global variables/configurations used by the classes below. Example: If you want to
  54. * change the path to the images used by the scripts, change it here. An object of this
  55. * class will always be available to the other classes. The name of this object is
  56. * "dhtmlSuiteConfigObj".
  57. *
  58. * If you want to create an object of this class manually, remember to name it "dhtmlSuiteConfigObj"
  59. * This object should then be created before any other objects. This is nescessary if you want
  60. * the other objects to use the values you have put into the object.
  61. * Update log:
  62. *
  63. ************************************************************************************************************/
  64.  
  65. // {{{ DHTMLgoodies_config()
  66. /**
  67.  * Constructor
  68.  *
  69.  * @public
  70.  */
  71. function DHTMLgoodies_config()
  72. {
  73. var imagePath; // Path to images used by the classes.
  74. var cssPath; // Path to CSS files used by the DHTML suite.
  75. }
  76.  
  77.  
  78. DHTMLgoodies_config.prototype = {
  79. // {{{ init()
  80. /**
  81. *
  82. * @public
  83. */
  84. init : function()
  85. {
  86. this.imagePath = 'images_dhtmlsuite/'; // Path to images
  87. this.cssPath = 'css_dhtmlsuite/'; // Path to images
  88. }
  89. // }}}
  90. ,
  91. // {{{ setCssPath()
  92. /**
  93.   * This method will save a new CSS path, i.e. where the css files of the dhtml suite are located.
  94.   *
  95.   * @param string newCssPath = New path to css files
  96.   * @public
  97.   */
  98.  
  99. setCssPath : function(newCssPath)
  100. {
  101. this.cssPath = newCssPath;
  102. }
  103. // }}}
  104. ,
  105. // {{{ setImagePath()
  106. /**
  107.   * This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located
  108.   *
  109.   * @param string newImagePath = New path to image files
  110.   * @public
  111.   */
  112. setImagePath : function(newImagePath)
  113. {
  114. this.imagePath = newImagePath;
  115. }
  116. // }}}
  117. }
  118.  
  119. /************************************************************************************************************
  120. * A class with general methods used by most of the scripts
  121. *
  122. * Created: August, 19th, 2006
  123. * Purpose of class: A class containing common method used by one or more of the gui classes below,
  124. * example: loadCSS.
  125. * An object("dhtmlSuiteCommonObj") of this class will always be available to the other classes.
  126. * Update log:
  127. *
  128. ************************************************************************************************************/
  129.  
  130. // {{{ DHTMLgoodies_common()
  131. /**
  132.  * Constructor
  133.  *
  134.  */
  135. function DHTMLgoodies_common()
  136. {
  137. var loadedCSSFiles; // Array of loaded CSS files. Prevent same CSS file from being loaded twice.
  138. }
  139.  
  140. DHTMLgoodies_common.prototype = {
  141.  
  142. // {{{ init()
  143. /**
  144.   * This method initializes the DHTMLgoodies_common object.
  145.   *
  146.   * @public
  147.   */
  148.  
  149. init : function()
  150. {
  151. this.loadedCSSFiles = new Array();
  152. }
  153. // }}}
  154. ,
  155. // {{{ getTopPos()
  156. /**
  157.   * This method will return the top coordinate(pixel) of an object
  158.   *
  159.   * @param Object inputObj = Reference to HTML element
  160.   * @public
  161.   */
  162. getTopPos : function(inputObj)
  163. {
  164. var returnValue = inputObj.offsetTop;
  165. while((inputObj = inputObj.offsetParent) != null){
  166. if(inputObj.tagName!='HTML'){
  167. returnValue += inputObj.offsetTop;
  168. if(document.all)returnValue+=inputObj.clientTop;
  169. }
  170. }
  171. return returnValue;
  172. }
  173. // }}}
  174.  
  175. ,
  176. // {{{ getLeftPos()
  177. /**
  178.   * This method will return the left coordinate(pixel) of an object
  179.   *
  180.   * @param Object inputObj = Reference to HTML element
  181.   * @public
  182.   */
  183. getLeftPos : function(inputObj)
  184. {
  185. var returnValue = inputObj.offsetLeft;
  186. while((inputObj = inputObj.offsetParent) != null){
  187. if(inputObj.tagName!='HTML'){
  188. returnValue += inputObj.offsetLeft;
  189. if(document.all)returnValue+=inputObj.clientLeft;
  190. }
  191. }
  192. return returnValue;
  193. }
  194. // }}}
  195. ,
  196. // {{{ cancelEvent()
  197. /**
  198.   *
  199.   * This function only returns false. It is used to cancel selections and drag
  200.   *
  201.   *
  202.   * @public
  203.   */
  204.  
  205. cancelEvent : function()
  206. {
  207. return false;
  208. }
  209. // }}}
  210.  
  211. }
  212.  
  213.  
  214. /************************************************************************************************************
  215. * Client info class
  216. *
  217. * Created: August, 18th, 2006
  218. * Purpose of class: Provide browser information to the classes below. Instead of checking for
  219. * browser versions and browser types in the classes below, they should check this
  220. * easily by referncing properties in the class below. An object("clientInfoObj") of this
  221. * class will always be accessible to the other classes.
  222. * Update log:
  223. *
  224. ************************************************************************************************************/
  225.  
  226. /*
  227. Constructor
  228. */
  229.  
  230. function DHTMLgoodies_clientInfo()
  231. {
  232. var browser; // Complete user agent information
  233.  
  234. var isOpera; // Is the browser "Opera"
  235. var isMSIE; // Is the browser "Internet Explorer"
  236. var isFirefox; // Is the browser "Firefox"
  237. var navigatorVersion; // Browser version
  238. }
  239.  
  240. DHTMLgoodies_clientInfo.prototype = {
  241.  
  242. /**
  243. * Constructor
  244. * Params: none:
  245. * return value: none;
  246. **/
  247. // {{{ init()
  248. /**
  249.   *
  250. *
  251.   * This method initializes the script
  252.   *
  253.   *
  254.   * @public
  255.   */
  256.  
  257. init : function()
  258. {
  259. this.browser = navigator.userAgent;
  260. this.isOpera = (this.browser.toLowerCase().indexOf('opera')>=0)?true:false;
  261. this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;
  262. this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;
  263. this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
  264. }
  265. // }}}
  266. }
  267.  
  268.  
  269. /************************************************************************************************************
  270. * Drag and drop class
  271. *
  272. * Created: August, 18th, 2006
  273. * Purpose of class: A general drag and drop class. By creating objects of this class, you can make elements
  274. * on your web page dragable and also assign actions to element when an item is dropped on it.
  275. * A page should only have one object of this class.
  276. *
  277. * IMPORTANT when you use this class: Don't assign layout to the dragable element ids
  278. * Assign it to classes or the tag instead. example: If you make <div id="dragableBox1" class="aBox">
  279. * dragable, don't assign css to #dragableBox1. Assign it to div or .aBox instead.
  280. *
  281. * Update log:
  282. *
  283. ************************************************************************************************************/
  284.  
  285. var referenceToDragDropObject; // A reference to an object of the class below.
  286.  
  287. /*
  288. Constructor
  289. */
  290. function DHTMLgoodies_dragDrop()
  291. {
  292. var mouse_x; // mouse x position when drag is started
  293. var mouse_y; // mouse y position when drag is started.
  294.  
  295. var el_x; // x position of dragable element
  296. var el_y; // y position of dragable element
  297.  
  298. var dragDropTimer; // Timer - short delay from mouse down to drag init.
  299. var numericIdToBeDragged; // numeric reference to element currently being dragged.
  300. var dragObjCloneArray; // Array of cloned dragable elements. every
  301. var dragDropSourcesArray; // Array of source elements, i.e. dragable elements.
  302. var dragDropTargetArray; // Array of target elements, i.e. elements where items could be dropped.
  303. var currentZIndex; // Current z index. incremented on each drag so that currently dragged element is always on top.
  304. var okToStartDrag; // Variable which is true or false. It would be false for 1/100 seconds after a drag has been started.
  305. // This is useful when you have nested dragable elements. It prevents the drag process from staring on
  306. // parent element when you click on dragable sub element.
  307. var moveBackBySliding; // Variable indicating if objects should slide into place moved back to their location without any slide animation.
  308. }
  309.  
  310. DHTMLgoodies_dragDrop.prototype = {
  311.  
  312. // {{{ init()
  313. /**
  314.   * Initialize the script
  315.   * This method should be called after you have added sources and destinations.
  316.   *
  317.   * @public
  318.   */
  319. init : function()
  320. {
  321. if(!standardObjectsCreated)DHTMLgoodies_createStandardObjects(); // This line starts all the init methods
  322. this.currentZIndex = 10000;
  323. this.dragDropTimer = -1;
  324. this.dragObjCloneArray = new Array();
  325. this.numericIdToBeDragged = false;
  326. this.__initDragDropScript();
  327. referenceToDragDropObject = this;
  328. this.okToStartDrag = true;
  329. this.moveBackBySliding = true;
  330. }
  331. // }}}
  332. ,
  333. // {{{ addSource()
  334. /**
  335.   * Add dragable element
  336.   *
  337.   * @param String sourceId = Id of source
  338.   * @param boolean slideBackAfterDrop = Slide the item back to it's original location after drop.
  339.   * @param boolean xAxis = Allowed to slide along the x-axis(default = true, i.e. if omitted).
  340.   * @param boolean yAxis = Allowed to slide along the y-axis(default = true, i.e. if omitted).
  341.   * @param String dragOnlyWithinElId = You will only allow this element to be dragged within the boundaries of the element with this id.
  342.   * @param String functionToCallOnDrag = Function to call when drag is initiated. id of element(clone and orig) will be passed to this function . clone is a copy of the element created by this script. The clone is what you see when drag is in process.
  343.   *
  344.   * @public
  345.   */
  346. addSource : function(sourceId,slideBackAfterDrop,xAxis,yAxis,dragOnlyWithinElId,functionToCallOnDrag)
  347. {
  348. if(!functionToCallOnDrag)functionToCallOnDrag=false;
  349. if(!this.dragDropSourcesArray)this.dragDropSourcesArray = new Array();
  350. if(!document.getElementById(sourceId))alert('The source element with id ' + sourceId + ' does not exists');
  351. var obj = document.getElementById(sourceId);
  352.  
  353. if(xAxis!==false)xAxis = true;
  354. if(yAxis!==false)yAxis = true;
  355.  
  356. this.dragDropSourcesArray[this.dragDropSourcesArray.length] = [obj,slideBackAfterDrop,xAxis,yAxis,dragOnlyWithinElId,functionToCallOnDrag];
  357. obj.setAttribute('dragableElement',this.dragDropSourcesArray.length-1);
  358. obj.dragableElement = this.dragDropSourcesArray.length-1;
  359.  
  360. }
  361. // }}}
  362. ,
  363. // {{{ addTarget()
  364. /**
  365.   * Add drop target
  366.   *
  367.   * @param String targetId = Id of drop target
  368.   * @param String functionToCallOnDrop = name of function to call on drop.
  369. * Input to this the function specified in functionToCallOnDrop function would be
  370. * id of dragged element
  371. * id of the element the item was dropped on.
  372. * mouse x coordinate when item was dropped
  373. * mouse y coordinate when item was dropped
  374.   *
  375.   * @public
  376.   */
  377. addTarget : function(targetId,functionToCallOnDrop)
  378. {
  379. if(!this.dragDropTargetArray)this.dragDropTargetArray = new Array();
  380. if(!document.getElementById(targetId))alert('The target element with id ' + targetId + ' does not exists');
  381. var obj = document.getElementById(targetId);
  382. this.dragDropTargetArray[this.dragDropTargetArray.length] = [obj,functionToCallOnDrop];
  383. }
  384. // }}}
  385. ,
  386.  
  387. // {{{ setSlide()
  388. /**
  389.   * Activate or deactivate sliding animations.
  390.   *
  391.   * @param boolean slide = Move element back to orig. location in a sliding animation
  392.   *
  393.   * @public
  394.   */
  395. setSlide : function(slide)
  396. {
  397. this.moveBackBySliding = slide;
  398.  
  399. }
  400. // }}}
  401. ,
  402.  
  403. /* Start private methods */
  404.  
  405. // {{{ __initDragDropScript()
  406. /**
  407.   * Initialize drag drop script - this method is called by the init() method.
  408.   *
  409.   * @private
  410.   */
  411. __initDragDropScript : function()
  412. {
  413. var refToThis = this;
  414. for(var no=0;no<this.dragDropSourcesArray.length;no++){
  415. var el = this.dragDropSourcesArray[no][0].cloneNode(true);
  416. el.onmousedown =this.__initDragDropElement;
  417. el.id = 'DHTMLgoodies_dragableElement' + no;
  418. el.style.position='absolute';
  419. el.style.visibility='hidden';
  420. el.style.display='none';
  421.  
  422. this.dragDropSourcesArray[no][0].parentNode.insertBefore(el,this.dragDropSourcesArray[no][0]);
  423.  
  424. el.style.top = dhtmlSuiteCommonObj.getTopPos(this.dragDropSourcesArray[no][0]) + 'px';
  425. el.style.left = dhtmlSuiteCommonObj.getLeftPos(this.dragDropSourcesArray[no][0]) + 'px';
  426.  
  427. this.dragDropSourcesArray[no][0].onmousedown =this.__initDragDropElement;
  428.  
  429. this.dragObjCloneArray[no] = el;
  430. }
  431.  
  432. document.documentElement.onmousemove = this.__moveDragableElement;
  433. document.documentElement.onmouseup = this.__stop_dragDropElement;
  434. document.documentElement.onselectstart = function() { return refToThis.__cancelSelectionEvent(false,this) };
  435. document.documentElement.ondragstart = function() { return dhtmlSuiteCommonObj.cancelEvent(false,this) };
  436. }
  437. // }}}
  438. ,
  439.  
  440. // {{{ __initDragDropElement()
  441. /**
  442.   * Initialize drag process
  443.   *
  444.   * @param Event e = Event object, used to get x and y coordinate of mouse pointer
  445.   *
  446.   * @private
  447.   */
  448. // {{{ __initDragDropElement()
  449. /**
  450.   * Initialize drag process
  451.   *
  452.   * @param Event e = Event object, used to get x and y coordinate of mouse pointer
  453.   *
  454.   * @private
  455.   */
  456. __initDragDropElement : function(e)
  457. {
  458. if(!referenceToDragDropObject.okToStartDrag)return;
  459. referenceToDragDropObject.okToStartDrag = false;
  460. setTimeout('referenceToDragDropObject.okToStartDrag = true;',100);
  461. if(document.all)e = event;
  462. referenceToDragDropObject.numericIdToBeDragged = this.getAttribute('dragableElement');
  463. referenceToDragDropObject.numericIdToBeDragged = referenceToDragDropObject.numericIdToBeDragged + '';
  464. if(referenceToDragDropObject.numericIdToBeDragged=='')referenceToDragDropObject.numericIdToBeDragged = this.dragableElement;
  465. referenceToDragDropObject.dragDropTimer=0;
  466.  
  467. referenceToDragDropObject.mouse_x = e.clientX;
  468. referenceToDragDropObject.mouse_y = e.clientY;
  469.  
  470. referenceToDragDropObject.currentZIndex = referenceToDragDropObject.currentZIndex + 1;
  471.  
  472. referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.zIndex = referenceToDragDropObject.currentZIndex;
  473.  
  474. referenceToDragDropObject.currentEl_allowX = referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][2];
  475. referenceToDragDropObject.currentEl_allowY = referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][3];
  476.  
  477. var parentEl = referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][4];
  478. referenceToDragDropObject.drag_minX = false;
  479. referenceToDragDropObject.drag_minY = false;
  480. referenceToDragDropObject.drag_maxX = false;
  481. referenceToDragDropObject.drag_maxY = false;
  482. if(parentEl){
  483. var obj = document.getElementById(parentEl);
  484. if(obj){
  485. referenceToDragDropObject.drag_minX = dhtmlSuiteCommonObj.getLeftPos(obj);
  486. referenceToDragDropObject.drag_minY = dhtmlSuiteCommonObj.getTopPos(obj);
  487. referenceToDragDropObject.drag_maxX = referenceToDragDropObject.drag_minX + obj.clientWidth;
  488. referenceToDragDropObject.drag_maxY = referenceToDragDropObject.drag_minY + obj.clientHeight;
  489. }
  490. }
  491.  
  492.  
  493.  
  494.  
  495. // Reposition dragable element
  496. if(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][1]){
  497. referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0]) + 'px';
  498. referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.left = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0]) + 'px';
  499. }
  500. referenceToDragDropObject.el_x = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.left.replace('px','')/1;
  501. referenceToDragDropObject.el_y = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.top.replace('px','')/1;
  502.  
  503.  
  504.  
  505. referenceToDragDropObject.__timerDragDropElement();
  506.  
  507.  
  508.  
  509. return false;
  510. }
  511. // }}}
  512. ,
  513.  
  514. // {{{ __timerDragDropElement()
  515. /**
  516.   * A small delay from mouse down to drag starts
  517.   *
  518.   * @private
  519.   */
  520. __timerDragDropElement : function()
  521. {
  522. window.thisRef = this;
  523. if(this.dragDropTimer>=0 && this.dragDropTimer<5){
  524. this.dragDropTimer = this.dragDropTimer + 1;
  525. setTimeout('window.thisRef.__timerDragDropElement()',2);
  526. return;
  527. }
  528. if(this.dragDropTimer>=5){
  529. if(this.dragObjCloneArray[this.numericIdToBeDragged].style.display=='none'){
  530. this.dragDropSourcesArray[this.numericIdToBeDragged][0].style.visibility = 'hidden';
  531. this.dragObjCloneArray[this.numericIdToBeDragged].style.display = 'block';
  532. this.dragObjCloneArray[this.numericIdToBeDragged].style.visibility = 'visible';
  533. this.dragObjCloneArray[this.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(this.dragDropSourcesArray[this.numericIdToBeDragged][0]) + 'px';
  534. this.dragObjCloneArray[this.numericIdToBeDragged].style.left = dhtmlSuiteCommonObj.getLeftPos(this.dragDropSourcesArray[this.numericIdToBeDragged][0]) + 'px';
  535. }
  536.  
  537. if(this.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][5]){
  538. var id1 = this.dragObjCloneArray[this.numericIdToBeDragged].id + '';
  539. var id2 = this.dragDropSourcesArray[this.numericIdToBeDragged][0].id + '';
  540.  
  541. var string = this.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][5] + '("' + id1 + '","' + id2 + '")';
  542. eval(string);
  543. }
  544. }
  545. }
  546. // }}}
  547. ,
  548.  
  549. // {{{ __cancelSelectionEvent()
  550. /**
  551.   * Cancel text selection when drag is in progress
  552.   *
  553.   * @private
  554.   */
  555. __cancelSelectionEvent : function()
  556. {
  557. if(this.dragDropTimer>=0)return false;
  558. return true;
  559. }
  560. // }}}
  561. ,
  562.  
  563. // {{{ __moveDragableElement()
  564. /**
  565.   * Move dragable element according to mouse position when drag is in process.
  566.   *
  567.   * @param Event e = Event object, used to get x and y coordinate of mouse pointer
  568.   *
  569.   * @private
  570.   */
  571. __moveDragableElement : function(e)
  572. {
  573. if(document.all)e = event;
  574. if(referenceToDragDropObject.dragDropTimer<5)return;
  575. var dragObj = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged];
  576.  
  577. if(referenceToDragDropObject.currentEl_allowX){
  578.  
  579. var leftPos = (e.clientX - referenceToDragDropObject.mouse_x + referenceToDragDropObject.el_x);
  580. if(referenceToDragDropObject.drag_maxX){
  581. var tmpMaxX = referenceToDragDropObject.drag_maxX - dragObj.offsetWidth;
  582. if(leftPos > tmpMaxX)leftPos = tmpMaxX
  583. if(leftPos < referenceToDragDropObject.drag_minX)leftPos = referenceToDragDropObject.drag_minX;
  584. }
  585. dragObj.style.left = leftPos + 'px';
  586.  
  587. }
  588. if(referenceToDragDropObject.currentEl_allowY){
  589. var topPos = (e.clientY - referenceToDragDropObject.mouse_y + referenceToDragDropObject.el_y);
  590. if(referenceToDragDropObject.drag_maxY){
  591. var tmpMaxY = referenceToDragDropObject.drag_maxY - dragObj.offsetHeight;
  592. if(topPos > tmpMaxY)topPos = tmpMaxY;
  593. if(topPos < referenceToDragDropObject.drag_minY)topPos = referenceToDragDropObject.drag_minY;
  594.  
  595. }
  596.  
  597. dragObj.style.top = topPos + 'px';
  598. }
  599.  
  600. }
  601. // }}}
  602. ,
  603.  
  604. // {{{ __stop_dragDropElement()
  605. /**
  606.   * Drag process stopped.
  607.   * Note! In this method "this" refers to the element being dragged. referenceToDragDropObject refers to the dragDropObject.
  608.   *
  609.   * @param Event e = Event object, used to get x and y coordinate of mouse pointer
  610.   *
  611.   * @private
  612.   */
  613. __stop_dragDropElement : function(e)
  614. {
  615. if(referenceToDragDropObject.dragDropTimer<5)return;
  616. if(document.all)e = event;
  617.  
  618. // Dropped on which element
  619. if (e.target) dropDestination = e.target;
  620. else if (e.srcElement) dropDestination = e.srcElement;
  621. if (dropDestination.nodeType == 3) // defeat Safari bug
  622. dropDestination = dropDestination.parentNode;
  623.  
  624.  
  625. var leftPosMouse = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
  626. var topPosMouse = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop);
  627.  
  628. if(!referenceToDragDropObject.dragDropTargetArray)referenceToDragDropObject.dragDropTargetArray = new Array();
  629. // Loop through drop targets and check if the coordinate of the mouse is over it. If it is, call specified drop function.
  630. for(var no=0;no<referenceToDragDropObject.dragDropTargetArray.length;no++){
  631. var leftPosEl = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropTargetArray[no][0]);
  632. var topPosEl = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropTargetArray[no][0]);
  633. var widthEl = referenceToDragDropObject.dragDropTargetArray[no][0].offsetWidth;
  634. var heightEl = referenceToDragDropObject.dragDropTargetArray[no][0].offsetHeight;
  635.  
  636. if(leftPosMouse > leftPosEl && leftPosMouse < (leftPosEl + widthEl) && topPosMouse > topPosEl && topPosMouse < (topPosEl + heightEl)){
  637. if(referenceToDragDropObject.dragDropTargetArray[no][1])eval(referenceToDragDropObject.dragDropTargetArray[no][1] + '("' + referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0].id + '","' + referenceToDragDropObject.dragDropTargetArray[no][0].id + '",' + e.clientX + ',' + e.clientY + ')');
  638. break;
  639. }
  640. }
  641.  
  642. if(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][1]){
  643. referenceToDragDropObject.__slideElementBackIntoItsOriginalPosition(referenceToDragDropObject.numericIdToBeDragged);
  644. }
  645.  
  646. // Variable cleanup after drop
  647. referenceToDragDropObject.dragDropTimer = -1;
  648. referenceToDragDropObject.numericIdToBeDragged = false;
  649.  
  650. }
  651. // }}}
  652. ,
  653.  
  654. // {{{ __slideElementBackIntoItsOriginalPosition()
  655. /**
  656.   * Slide an item back to it's original position
  657.   *
  658.   * @param Integer numId = numeric index of currently dragged element
  659.   *
  660.   * @private
  661.   */
  662. __slideElementBackIntoItsOriginalPosition : function(numId)
  663. {
  664. // Coordinates current element position
  665. var currentX = this.dragObjCloneArray[numId].style.left.replace('px','')/1;
  666. var currentY = this.dragObjCloneArray[numId].style.top.replace('px','')/1;
  667.  
  668. // Coordinates - where it should slide to
  669. var targetX = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropSourcesArray[numId][0]);
  670. var targetY = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[numId][0]);;
  671.  
  672. if(this.moveBackBySliding){
  673. // Call the step by step slide method
  674. this.__processSlide(numId,currentX,currentY,targetX,targetY);
  675. }else{
  676. this.dragObjCloneArray[numId].style.display='none';
  677. this.dragDropSourcesArray[numId][0].style.visibility = 'visible';
  678. }
  679.  
  680. }
  681. // }}}
  682. ,
  683.  
  684. // {{{ __processSlide()
  685. /**
  686.   * Move the element step by step in this method
  687.   *
  688.   * @param Int numId = numeric index of currently dragged element
  689.   * @param Int currentX = Elements current X position
  690.   * @param Int currentY = Elements current Y position
  691.   * @param Int targetX = Destination X position, i.e. where the element should slide to
  692.   * @param Int targetY = Destination Y position, i.e. where the element should slide to
  693.   *
  694.   * @private
  695.   */
  696. __processSlide : function(numId,currentX,currentY,targetX,targetY)
  697. {
  698. // Find slide x value
  699. var slideX = Math.round(Math.abs(Math.max(currentX,targetX) - Math.min(currentX,targetX)) / 10);
  700. // Find slide y value
  701. var slideY = Math.round(Math.abs(Math.max(currentY,targetY) - Math.min(currentY,targetY)) / 10);
  702.  
  703. if(slideY<3 && Math.abs(slideX)<10)slideY = 3; // 3 is minimum slide value
  704. if(slideX<3 && Math.abs(slideY)<10)slideX = 3; // 3 is minimum slide value
  705.  
  706.  
  707. if(currentX > targetX) slideX*=-1; // If current x is larger than target x, make slide value negative<br>
  708. if(currentY > targetY) slideY*=-1; // If current y is larger than target x, make slide value negative
  709.  
  710. // Update currentX and currentY
  711. currentX = currentX + slideX;
  712. currentY = currentY + slideY;
  713.  
  714. // If currentX or currentY is close to targetX or targetY, make currentX equal to targetX(or currentY equal to targetY)
  715. if(Math.max(currentX,targetX) - Math.min(currentX,targetX) < 4)currentX = targetX;
  716. if(Math.max(currentY,targetY) - Math.min(currentY,targetY) < 4)currentY = targetY;
  717.  
  718. // Update CSS position(left and top)
  719. this.dragObjCloneArray[numId].style.left = currentX + 'px';
  720. this.dragObjCloneArray[numId].style.top = currentY + 'px';
  721.  
  722. // currentX different than targetX or currentY different than targetY, call this function in again in 5 milliseconds
  723. if(currentX!=targetX || currentY != targetY){
  724. window.thisRef = this; // Reference to this dragdrop object
  725. setTimeout('window.thisRef.__processSlide("' + numId + '",' + currentX + ',' + currentY + ',' + targetX + ',' + targetY + ')',5);
  726. }else{ // Slide completed. Make absolute positioned element invisible and original element visible
  727. this.dragObjCloneArray[numId].style.display='none';
  728. this.dragDropSourcesArray[numId][0].style.visibility = 'visible';
  729. }
  730. }
  731. }


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <title>Demo 2: Drag and drop</title>
  3. <?
  4. $keywords = "Drag and drop script,DHTML drag and drop,drag,drop";
  5. @include($_SERVER['DOCUMENT_ROOT']."/config/metatags.inc");
  6. ?>
  7. <link rel="stylesheet" href="css/demos.css" media="screen" type="text/css">
  8. <style type="text/css">
  9. /* CSS for the demo. CSS needed for the scripts are loaded dynamically by the scripts */
  10. #mainContainer{
  11. width:600px;
  12. margin:0 auto;
  13. margin-top:10px;
  14. border:1px solid #000;
  15. padding:2px;
  16. }
  17.  
  18. #leftColumn{
  19. width:300px;
  20. float:left;
  21. border:1px solid #000;
  22. background-color:#E2EBED;
  23. padding:3px;
  24. height:400px;
  25. }
  26. #rightColumn{
  27. width:200px;
  28. float:right;
  29. margin:2px;
  30. height:400px;
  31. }
  32. .dragableBox{
  33. width:100px;
  34. height:40px;
  35. border:1px solid #000;
  36. background-color:#FFF;
  37. margin-bottom:5px;
  38. padding:10px;
  39. font-weight:bold;
  40. text-align:center;
  41. }
  42. .dropBox{
  43. width:190px;
  44. border:1px solid #000;
  45. background-color:#E2EBED;
  46. height:400px;
  47. margin-bottom:10px;
  48. padding:3px;
  49. overflow:auto;
  50. }
  51. a{
  52. color:#F00;
  53. }
  54.  
  55. .clear{
  56. clear:both;
  57. }
  58. img{
  59. border:0px;
  60. }
  61. </style>
  62. <script type="text/javascript" src="js/drag-drop-custom.js"></script>
  63. </head>
  64. <body>
  65. <div id="header"><a href="/index.html"><img src="/images/heading3.gif"></a></div>
  66. <div id="mainContainer">
  67. <h2>Drag and drop - demo 2</h2>
  68. <div id="leftColumn">
  69. <p><b>Drop some boxes on me</b></p>
  70. <div id="dropContent">
  71. <div class="dragableBox" id="box1">CAT</div>
  72. <div class="dragableBox" id="box2">DOG</div>
  73. <div class="dragableBox" id="box3">HORSE</div>
  74. <div class="dragableBox" id="box4">TIGER</div>
  75. </div>
  76. </div>
  77. <div id="rightColumn">
  78. <div id="dropBox" class="dropBox">
  79. <p><b>Drop some boxes on me</b></p>
  80. <div id="dropContent2"></div>
  81. </div>
  82. </div>
  83. <div class="clear"></div>
  84. <div class="konaBody">
  85. <a href="#" onclick="dragDropObj.setSlide(true);return false">Activate sliding animation</a> | <a href="#" onclick="dragDropObj.setSlide(false);return false">Deactivate sliding animation</a>
  86. </div>
  87. </div>
  88.  
  89. <div id="debug"></div>
  90. <script type="text/javascript">
  91.  
  92. // Custom drop actions for <div id="dropBox"> and <div id="leftColumn">
  93. function dropItems(idOfDraggedItem,targetId,x,y)
  94. {
  95. if(targetId=='dropBox'){ // Item dropped on <div id="dropBox">
  96. var obj = document.getElementById(idOfDraggedItem);
  97. if(obj.parentNode.id=='dropContent2')return;
  98. document.getElementById('dropContent2').appendChild(obj); // Appending dragged element as child of target box
  99. }
  100. if(targetId=='leftColumn'){ // Item dropped on <div id="leftColumn">
  101. var obj = document.getElementById(idOfDraggedItem);
  102. if(obj.parentNode.id=='dropContent')return;
  103. document.getElementById('dropContent').appendChild(obj); // Appending dragged element as child of target box
  104. }
  105.  
  106. }
  107.  
  108. function onDragFunction(cloneId,origId)
  109. {
  110. self.status = 'Started dragging element with id ' + cloneId;
  111.  
  112. var obj = document.getElementById(cloneId);
  113. obj.style.border='1px solid #F00';
  114. }
  115.  
  116.  
  117.  
  118.  
  119. var dragDropObj = new DHTMLgoodies_dragDrop();
  120. dragDropObj.addSource('box1',true,true,true,false,'onDragFunction'); // Make <div id="box1"> dragable. slide item back into original position after drop
  121. dragDropObj.addSource('box2',true,true,true,false,'onDragFunction'); // Make <div id="box2"> dragable. slide item back into original position after drop
  122. dragDropObj.addSource('box3',true,true,true,false,'onDragFunction'); // Make <div id="box3"> dragable. slide item back into original position after drop
  123. dragDropObj.addSource('box4',true,true,true,false,'onDragFunction'); // Make <div id="box4"> dragable. slide item back into original position after drop
  124. dragDropObj.addTarget('dropBox','dropItems'); // Set <div id="dropBox"> as a drop target. Call function dropItems on drop
  125. dragDropObj.addTarget('leftColumn','dropItems'); // Set <div id="leftColumn"> as a drop target. Call function dropItems on drop
  126. dragDropObj.init();
  127.  
  128. </body>
  129. </html>

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s