Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Jak odczytać ID diva?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
juzwa
chciałem zrobić bibliotekę - dla divów drag & drop

wygląda to wszystko tak

CZEŚĆ I - dodawanie usuwanie zdarzeń
właściwie niepotrzebna w temacie, ale jakby komuś się miało przydać, to jest tutaj całość
  1. function eventUntil ()
  2. {
  3. this.addEvent = function(target, eventType, functionName)
  4. {
  5.  
  6. if (target.addEventListener)
  7. {
  8. target.addEventListener(eventType, functionName, false);
  9. }
  10. else if (target.attachEvent)
  11. target.attachEvent("on" + eventType, functionName);
  12. else
  13. target["on" + eventType] = dds;
  14. }
  15.  
  16. this.removeEvent = function(target, eventType, functionName)
  17. {
  18. if (target.addEventListener)
  19. target.removeEventListener(eventType, functionName, false);
  20. else if (target.attachEvent)
  21. target.detachEvent("on" + eventType, functionName);
  22. else
  23. target["on" + eventType] = null;
  24. }
  25.  
  26. this.getEvent = function()
  27. {
  28. if (window.event)
  29. {
  30. return this.formatEvent(window.event);
  31. }
  32. else
  33. {
  34. return this.getEvent.caller.arguments[0];
  35. }
  36. }
  37.  
  38.  
  39.  
  40. this.formatEvent = function (eventType)
  41. {
  42.  
  43. if (typeof eventType.charCode == "undefined")
  44. {
  45. eventType.charCode = (eventType.type == "keypress") ? eventType.keyCode : 0;
  46. eventType.isChar = (eventType.charCode > 0);
  47. }
  48.  
  49. if (eventType.srcElement && !eventType.target)
  50. {
  51. eventType.eventPhase = 2;
  52. eventType.pageX = eventType.clientX + document.body.scrollLeft;
  53. eventType.pageY = eventType.clientY + document.body.scrollTop;
  54.  
  55. if (!eventType.preventDefault)
  56. {
  57. eventType.preventDefault = function ()
  58. {
  59. this.returnValue = false;
  60. };
  61. }
  62.  
  63. if (eventType.type == "mouseout")
  64. eventType.relatedTarget = eventType.toElement;
  65. else if (eventType.type == "mouseover")
  66. eventType.relatedTarget = eventType.fromElement;
  67.  
  68.  
  69. if (!eventType.stopPropagation)
  70. {
  71. eventType.stopPropagation = function ()
  72. {
  73. this.cancelBubble = true;
  74. };
  75. }
  76.  
  77. eventType.target = eventType.srcElement;
  78. eventType.time = (new Date).getTime();
  79.  
  80. }
  81. return eventType;
  82. };
  83. }


CZĘŚĆ II - właściwy drag & drop

  1. var dragNdrop =
  2. {
  3. elArray : new Array(),
  4. initElements: false,
  5. dragDiv : false,
  6. container : false,
  7. eUntil : new eventUntil(),
  8. diffX : 0,
  9. diffY : 0,
  10. currentDiv : '',
  11. initElement: function (dDiv,c)
  12. {
  13. dragDiv = this.checkElemetId(dDiv);
  14. if(!c || typeof c =='undefined')
  15. container = document.body;
  16. else
  17. container = this.checkElemetId(c);
  18.  
  19. initElements = dragDiv && container;
  20. if(initElements)
  21. {
  22. if(!dragNdrop.elArray[dDiv] || typeof dragNdrop.elArray[dDiv] == 'undefined')
  23. {
  24. dragNdrop.elArray[dDiv] = dragDiv;
  25. }
  26. dragNdrop.eUntil.addEvent(dragNdrop.elArray[dDiv],"mousedown",dragNdrop.eventMouseDown);
  27. }
  28. else
  29. {
  30.  
  31. }
  32. },
  33.  
  34. eventMouseDown : function()
  35. {
  36. var eventType = dragNdrop.eUntil.getEvent();
  37. dragNdrop.currentDiv = this.id;
  38. diffX = eventType.clientX - dragNdrop.elArray[dragNdrop.currentDiv].offsetLeft;
  39. diffY = eventType.clientY - dragNdrop.elArray[dragNdrop.currentDiv].offsetTop;
  40. dragNdrop.eUntil.addEvent(container, "mousemove", dragNdrop.eventMouseMove);
  41. dragNdrop.eUntil.addEvent(container, "mouseup", dragNdrop.eventMouseUp);
  42. },
  43. eventMouseMove : function()
  44. {
  45. var eventType = dragNdrop.eUntil.getEvent();
  46.  
  47. dragNdrop.elArray[dragNdrop.currentDiv].style.left = eventType.clientX - diffX;
  48. dragNdrop.elArray[dragNdrop.currentDiv].style.top = eventType.clientY - diffY;
  49. },
  50.  
  51. eventMouseUp : function()
  52. {
  53. dragNdrop.eUntil.removeEvent(container, "mousemove", dragNdrop.eventMouseMove);
  54. dragNdrop.eUntil.removeEvent(container, "mouseup", dragNdrop.eventMouseUp);
  55. },
  56.  
  57. checkElemetId : function (id)
  58. {
  59. if(document.getElementById(id))
  60. return document.getElementById(id);
  61. return false;
  62. }
  63. }


przykład wywołania

//np na onload
dragNdrop.initElement('div_1');
dragNdrop.initElement('div_2');


o ile pod FF działa to pod IE przywiesiłem się w miejscu
dragNdrop.currentDiv = this.id;

chcę aby na mouseDown funkcja która gdzieś tam wcześniej została przypisana do tego diva odebrała id tego diva i aby wszystkie przeliczenia funkcje itd odnosiły się do tego diva, a nie np do ostatniego zainicjalizowanego

pod IE this.id to undefined i nie mam pojęcia jak zrobić aby było dobrze
lord_t
Próbowałem to uruchomić w ogóle, pod ff, między innymi tak:

Kod
function startxxx()
{
dragNdrop.initElement('div_2','div_1');
}



  1. <input type="button" name="sub" value="Dodaj" onclick="startxxx();" />
  2. <div id='div_1' style="width:400px;height:500px;border:black solid 1px;">
  3. <div id='div_2' style="width:40px;height:40px;border:black solid 1px;background-color:red;"></div>
  4. </div>


Ale mi nie działało, powiedz co robię(ew. wklej działające wywołanie) źle to postaram się pomóc:)
juzwa
Rozwiązanie problemu

w eventMouseDown : function()

zamiast samego
dragNdrop.currentDiv = this.id;

należy użyć

dragNdrop.currentDiv = this.id;
if(!dragNdrop.currentDiv || typeof dragNdrop.currentDiv =='undefined')
dragNdrop.currentDiv = window.event.srcElement.id;

Odpowiadając lord_t

1 - DIVY - muszą mieć position : absolute
2 - ze względu na moje przywieszenie z IE nie zrobiona jest jeszcze obsługa dragNdrop.initElement('div_2','div_1')

czyli że DIV_2 jest ruchomy tylko w zakresie DIV_1

bez podawania drugiego argumentu
dragNdrop.initElement('div_2')

DIV_2 jest ruchomy w zakresie całego obszaru widocznego
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.