Drag&Drop перетаскивание таблицы
есть таблица созданная при помощи elementCreate
хочу чтоб её можно было таскать за верхнюю строчку по всему окну.. как это сделать? вот код самой таблицы <style> #vjt-table-top{ background-image: url(skins/standart/images/22.png); background-repeat: repeat-x; width: 100% } #vjt-table-left{ background-image: url(skins/standart/images/25.png); background-repeat: repeat-y; height: 200px } #vjt-table-right{ background-image: url(skins/standart/images/26.png); background-repeat: repeat-y } #vjt-table-bottom{ background-image: url(skins/standart/images/27.png); background-repeat: repeat-x } #vij-table{ width: 500px } #vij-table-ie{ cellpadding: 0px; cellspacing: 0px; padding: 0 0 0 0; margin: 0 0 0 0; } .vjt-img{ border: 0; } </style> <input type="submit" value="Create" name="create" onclick="create_control()" /> <script language="JavaScript" type="text/javascript"> var vjtwindow; function create_control() { if (!vjtwindow) { vjtwindow=document.createElement("table"); vjtwindow.cellPadding = 0; vjtwindow.cellSpacing = 0; vjtwindow.setAttribute("id","vij-table"); var newRow=vjtwindow.insertRow(0); var newCell = newRow.insertCell(0); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/21.png\" class=\"vjt-img\"/>"; var newCell = newRow.insertCell(1); newCell.id="vjt-table-top"; newCell.innerHTML=""; var newCell = newRow.insertCell(2); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/24.png\" class=\"vjt-img\"/>"; var newRow=vjtwindow.insertRow(1); var newCell = newRow.insertCell(0); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/29.png\" class=\"vjt-img\"/>"; var newCell = newRow.insertCell(1); newCell.id="vjt-table-bottom"; newCell.innerHTML=""; var newCell = newRow.insertCell(2); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/28.png\" class=\"vjt-img\"/>"; var newRow=vjtwindow.insertRow(1); var newCell = newRow.insertCell(0); newCell.id="vjt-table-left"; newCell.innerHTML=""; var newCell = newRow.insertCell(1); newCell.id="vjt-tab"; newCell.setAttribute("vlign","top"); newCell.innerHTML="<b>23</b>"; var newCell = newRow.insertCell(2); newCell.id="vjt-table-right"; newCell.innerHTML=""; vjtwindow.position="absolute"; document.body.appendChild(vjtwindow); } } </script> |
сделать так же как и с нетаблицей :) Придумать алгоритм и реализовать!
|
а если я буду таскать табицу все элементы внутри неё будут таскаться вместе с ней?
|
естественно.
|
накопал вот такой вот скриптик по перетаскиванию картинки..
но почемуто переделать его под свою табличку не выходит <script language="JavaScript"> var ns6=(document.getElementById&&!document.all); var ie=(document.all); var n=""; var y=null; var x=null; var z=null; var w=null; if (ns6){window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); document.releaseEvents(Event.MOUSEMOVE);} if (ie||document.getElementById){document.onmousedown=down;document.onmouseup=up} function move(e){ if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x} if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y} return false; } function up(e){ if (ie||ns6)document.onmousemove=null; z=null; } function down(e){ if (ie && window.event.getElementById.parentElement){ if (window.event.srcElement.parentElement.id.indexOf("vjt-table") != -1){ document.onmousemove=move; z=window.event.srcElement.parentElement; y=window.event.offsetY; x=window.event.offsetX; w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1); window.event.srcElement.parentElement.style.zIndex=n++; } } if (ns6){ if (e.target.parentNode.id.indexOf("vjt-table") != -1){ document.onmousemove=move; z=e.target.parentNode.style; x=e.clientX - parseInt(z.left); y=e.clientY - parseInt(z.top); w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1); z.zIndex=n++; } } return false; } </script> <div id="vjt-table" style="position:absolute;top:300px;left:500px;cursor:move"> <img src="p1.gif" name="0"> </div> дело в том что немогу сделать так чтоб таскаемый элемент определяло по идшнику а не по src уже чё только не перепробовал.. ничё не получается.. может подскажите хотябы в каком направлении копать |
я всётаки придумал реализацию но есть 2 проблеммы
вот скрипт <body> <input type="submit" value="Create" name="create" onclick="create_elem()" /> <input type="submit" value="Destroy" name="destroy" onclick="destroy_elem()" /> <script language="JavaScript" type="text/javascript"> var moveState = false; // Переменные координат мыши в начале перемещения, пока неизвестны var x0, y0; // Начальные координаты элемента, пока неизвестны var divX0, divY0; // Выведем абсолютно-позиционированный DIV размером 50 * 50 // Зальем DIV черным цветом // Добавим прямо в DIV обработчики событий // Объявим функцию для определения координат мыши function defPosition(event) { var x = y = 0; if (document.attachEvent != null) { // Internet Explorer & Opera x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (!document.attachEvent && document.addEventListener) { // Gecko x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } return {x:x, y:y}; } // Функция инициализации движения // Записываем всё параметры начального состояния function initMove(div, event) { var event = event || window.event; x0 = defPosition(event).x; y0 = defPosition(event).y; divX0 = parseInt(div.style.left); divY0 = parseInt(div.style.top); moveState = true; } // Если клавишу мыши отпустили вне элемента движение должно прекратиться document.onmouseup = function() { moveState = false; } // И последнее // Функция обработки движения: function moveHandler(div, event) { var event = event || window.event; if (moveState) { div.style.left = divX0 + defPosition(event).x - x0; div.style.top = divY0 + defPosition(event).y - y0; } } var vjtwindow; function create_elem() { var mdiv = document.getElementById("mdiv"); if (!vjtwindow) { vjtwindow=document.createElement("table"); vjtwindow.cellPadding = 0; vjtwindow.cellSpacing = 0; vjtwindow.onmousedown="initMove(this, event);"; vjtwindow.onmouseup="moveState = false;"; vjtwindow.onmousemove="moveHandler(this, event);"; vjtwindow.id = "vij-table"; vjtwindow.name = "vij-table"; var newRow=vjtwindow.insertRow(0); var newCell = newRow.insertCell(0); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/21.png\" class=\"vjt-img\"/>"; var newCell = newRow.insertCell(1); newCell.id="vjt-table-top"; newCell.innerHTML=""; var newCell = newRow.insertCell(2); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/24.png\" class=\"vjt-img\"/>"; var newRow=vjtwindow.insertRow(1); var newCell = newRow.insertCell(0); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/29.png\" class=\"vjt-img\"/>"; var newCell = newRow.insertCell(1); newCell.id="vjt-table-bottom"; newCell.innerHTML=""; var newCell = newRow.insertCell(2); newCell.id="vij-table-ie"; newCell.innerHTML="<img src=\"skins/standart/images/28.png\" class=\"vjt-img\"/>"; var newRow=vjtwindow.insertRow(1); var newCell = newRow.insertCell(0); newCell.id="vjt-table-left"; newCell.innerHTML=""; var newCell = newRow.insertCell(1); newCell.id="vjt-tab"; newCell.setAttribute("vlign","top"); newCell.innerHTML="<b>23</b>"; var newCell = newRow.insertCell(2); newCell.id="vjt-table-right"; newCell.innerHTML=""; vjtwindow.position="absolute"; document.getElementById("mdiv").appendChild(vjtwindow); } } function destroy_elem(){ destrelem=document.getElementById("vij-table"); destrelem.parentNode.removeChild(vjtwindow); } </script> <div style='position:absolute; top:100px; left:100px; height: 500px; width:350px;' onmousedown = 'initMove(this, event);' onmouseup = 'moveState = false;' onmousemove = 'moveHandler(this, event);' id = 'mdiv'></div> проблема в том, что при нажатии кнопки уничтожение форма уничтожается, но потом её нельзя создать заново.. тобиш я нажимаю на создать а она не создаётся.. создаётся только 1 раз... проблемма 2 это то, что драг энд дроп работает только в ие .. как сделать скрипт кросбраузерным? |
Часовой пояс GMT +3, время: 05:08. |