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, время: 02:35. |