Столкнулся с 3 проблемами:
Chrome: при каждом drag'n'drop действии высота tbody увеличивается на 2 пикселя.
Opera: событие onselectstart не срабатывает.
Как зафиксировать пустое место под строкой во время её перемещения в IE / Chrome?
Подскажите мне пожалуйста :)
Свернутый текст
<html>
<body>
<style>
body {background:#666;}
table {background:#aaf1d9;}
table thead td {background:#5471d6; color:#fff;}
table tbody td {background:#dfe3f0;}
table td {width:100px; border:1px solid #666; margin:3px;}
table tr {height:22px;}
.can-accept td {background:#cb7446;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
Свернутый текст
$.fn.drag = function()
{
var
dragObject = null,
mouseOffset,
dropTargetRectangles = [],
dropTargets = $('tbody tr', this).get(),
currentDropTarget,
mouseDownAt,
trueDropObj,
tbody = $('tbody', this)[0],
rows = $('tbody tr', this),
cols = $('thead td', this);
$(this).height( $(this).height() );
function cacheDropTargetRectangles()
{
dropTargetRectangles = [];
var targ, targPos, targWidth, targHeight;
for(var i = 0; i < dropTargets.length; i++)
{
targ = dropTargets[i],
targPos = $(targ).offset(),
targWidth = parseInt(targ.offsetWidth),
targHeight = parseInt(targ.offsetHeight);
dropTargetRectangles.push(
{
xmin: targPos.left,
xmax: targPos.left + targWidth,
ymin: targPos.top,
ymax: targPos.top + targHeight,
dropTarget: targ
})
}
};
function revertDragObj(dragObj)
{
dragObj.style.position = '';
}
function changePosition(currDropObj, dragObj)
{
var rowIndex = currDropObj.sectionRowIndex - dragObj.sectionRowIndex;
// 1...n
// меняем местами строки a-1 и a
if (rowIndex === 1)
{
tbody.insertBefore(dragObj, currDropObj);
tbody.insertBefore(currDropObj, dragObj);
}
// меняем местами строки n и n-1
else if (dragObj.sectionRowIndex === dropTargets.length - 1)
{
tbody.insertBefore(currDropObj, dragObj);
tbody.insertBefore(dragObj, currDropObj);
}
// остальное
else
{
var M = dragObj.nextSibling;
while (M.nodeType !== 1)
{
if (M.nextSibling === null) {break;}
else {M = M.nextSibling;}
}
tbody.insertBefore(dragObj, currDropObj);
tbody.insertBefore(currDropObj, M);
}
dragObj.style.position = '';
}
function getCurrentTarget(e, currTarget)
{
for(var i = 0; i < dropTargetRectangles.length; i++)
{
var rect = dropTargetRectangles[i];
if(
(e.pageX > rect.xmin) &&
(e.pageX < rect.xmax) &&
(e.pageY > rect.ymin) &&
(e.pageY < rect.ymax) &&
(currTarget !== dropTargetRectangles[i].dropTarget))
{
return rect.dropTarget;
}
}
return null;
}
function addDocumentEventHandlers()
{
$(document).bind(
{
'mousemove':function(e){mousemove(e);},
'mouseup' :function(e){mouseup(e);}
});
document.ondragstart = function(){return false;}
document.body.onselectstart = function(){return false;}
}
function removeDocumentEventHandlers()
{
$(document).unbind('mousemove mouseup');
document.ondragstart = null;
document.body.onselectstart = null;
}
function getMouseOffset(target, x, y)
{
var docPos = $(target).offset();
return {x : x - docPos.left, y : y - docPos.top};
}
function showDrag(e)
{
if (dragObject)
{
dragObject.style.position = 'absolute';
dragObject.style.left = e.pageX - mouseOffset.x + 'px';
dragObject.style.top = e.pageY - mouseOffset.y + 'px';
dragObject.style.zIndex = 1;
}
var newTarget = getCurrentTarget(e, dragObject);
if (currentDropTarget && currentDropTarget != newTarget)
{
currentDropTarget.className = '';
}
currentDropTarget = newTarget;
if (newTarget)
{
newTarget.className = 'can-accept';
}
}
/*cols.mousedown(function(e){}*/
rows.mousedown(function(e)
{
mouseDownAt = {x: e.pageX, y: e.pageY, dragObject: this};
cacheDropTargetRectangles();
addDocumentEventHandlers();
});
mousemove = function(e)
{
if (mouseDownAt)
{
if (Math.abs(mouseDownAt.x - e.pageX) < 10 && Math.abs(mouseDownAt.y - e.pageY) < 10)
{
return;
}
// курсор нажатой мыши отвели далеко - начинаем перенос
dragObject = mouseDownAt.dragObject;
mouseOffset = getMouseOffset(dragObject, mouseDownAt.x, mouseDownAt.y);
// запомненные координаты нам больше не нужны
mouseDownAt = null;
}
showDrag(e);
return false;
}
mouseup = function()
{
if (!dragObject)
{
mouseDownAt = null;
}
else
{
if (currentDropTarget)
{
currentDropTarget.className = '';
changePosition(currentDropTarget, dragObject);
}
else
{
revertDragObj(dragObject);
}
dragObject.style.zIndex = 0;
dragObject = null;
}
removeDocumentEventHandlers();
}
return {
stopRowsDrag : function()
{
rows.unbind('mousedown');
}
};
}
$(document).ready(function()
{
var draggster = $('table').drag();
});
Свернутый текст
</script>
<table>
<thead>
<tr>
<td>Апельсины</td><td>Мандарины</td><td>Кактусы</td>
</tr>
</thead>
<tbody>
<tr>
<td>100 кг</td><td>200 кг </td><td>300 кг</td>
</tr>
<tr>
<td>0.5 г</td><td>0.6 г</td><td>0.7 г</td>
</tr>
<tr>
<td>1 т</td><td>2 т</td><td>3 т</td>
</tr>
<tr>
<td>10 т</td><td>20 т</td><td>30 т</td>
</tr>
<tr>
<td>### т</td><td>### т</td><td>### т</td>
</tr>
</tbody>
</table>
</body>
</html>
Код в таком формате под spoiler не читаем =( Писал в notepad++
Спустя 4 минуты, 43 секунды (8.09.2011 - 05:24) inpost написал(а):
maiordom
Я бы на твоем месте код выставил бы тут. В крайнем случае под спойлером. Причины 2:
1) Вирусы в архивах.
2) Лень распаковывать.
Я бы на твоем месте код выставил бы тут. В крайнем случае под спойлером. Причины 2:
1) Вирусы в архивах.
2) Лень распаковывать.
Спустя 11 минут, 20 секунд (8.09.2011 - 05:35) maiordom написал(а):
deleted.