Почему-то если позвать move() элемента(position:fixed), а потом update(), то его fixed позиционирование игнорируется. Если же передвигать через стиль + update(), то всё ОК.
C>Почему-то если позвать move() элемента(position:fixed), а потом update(), то его fixed позиционирование игнорируется. Если же передвигать через стиль + update(), то всё ОК.
Вызов $(#rect).style.clear(); после move должен помочь
Просто move() переводит элемент в режим спрайта, style.clear() возвращает нормальный positioning
Здравствуйте, eudo, Вы писали:
C>>Почему-то если позвать move() элемента(position:fixed), а потом update(), то его fixed позиционирование игнорируется. Если же передвигать через стиль + update(), то всё ОК.
E>Вызов $(#rect).style.clear(); после move должен помочь
Вообще-то и не должно. В вашем случае, для одноразового перемещения, используйте style#left&right. Move немного другие вещи делает
Или вот вам код tiscript, если нужно что-то тягать мышкой в пределах view. Этот бихейвор реализует эффективное перемещение элемента мышкой, посмотрите на clear и на контекст. Или опишите задачу.
type Wnd: Behavior
{
function this()
{
this.xoff = 0;
this.yoff = 0;
this.dragging = false;
}
function attached()
{
this.cap = this.select(":root>caption");
if(!this.cap) this.cap = this;
this.classRemoved = false;
}
function onMouse(evt)
{
switch(evt.type)
{
case Event.MOUSE_DOWN:
// Becouse evt.target is TEXT tag
if( evt.target.parent === this.cap || evt.target === this.cap)
{
this.boxW = this.box(#width);
this.boxH = this.box(#height);
this.viewW = view.box(#width);
this.viewH = view.box(#height);
this.xoff = evt.x;
this.yoff = evt.y;
this.dragging = true;
this.cap.capture(true);
return true;
}
break;
case Event.MOUSE_UP:
if(this.dragging)
{
this.dragging = false;
this.cap.capture(false);
var nx = evt.xRoot - evt.x + this.box(#left, #margin, #self) + this.cap.box(#left, #margin, #self),
ny = evt.yRoot - evt.y + this.box(#top, #margin, #self) + this.cap.box(#top, #margin, #self);
if(nx > this.viewW - this.boxW)
nx = this.viewW - this.boxW;
if(ny > this.viewH - this.boxH)
ny = this.viewH - this.boxH;
this.style.clear();
this.style#left = nx >= 0 ? nx : 0;
this.style#top = ny >= 0 ? ny : 0;
return true;
}
break;
case Event.MOUSE_MOVE:
if(this.dragging)
{
var mx = this.box(#left, #margin, #self),
my = this.box(#top, #margin, #self);
var nx = evt.xView - this.xoff,
ny = evt.yView - this.yoff;
if(nx >= this.viewW - (this.boxW - mx))
nx = this.viewW - this.boxW + mx;
if(ny >= this.viewH - this.boxH - -1*my)
ny = this.viewH - this.boxH + my;
var dx = nx + mx, dy = ny + my;
if(dx <= 0) nx = -1*mx;
if(dy <= 0) ny = -1*my;
this.move(nx, ny);
return true;
}
break;
}
}
function setCenter()
{
var boxW = this.box(#width), boxH = this.box(#height);
var viewW = self.box(#width), viewH = self.box(#height);
var x = viewW/2 - boxW/2, y = viewH/2 - boxH/2;
this.style#left = x;
this.style#top = y;
}
}
Спасибо за код, не совсем понятен такой момент — правильно ли я понимаю, что после использования move() всегда нужно сбрасывать стиль, если планируется ещё что-делать с элементом(наример, изменить размер)? Как-то мне не улыбается каждый раз сохранять десяток-другой атрибутов. И как узнать, в каком состоянии находится элемент — спрайт или не спрайт?
Здравствуйте, cgibin, Вы писали:
C>Спасибо за код, не совсем понятен такой момент — правильно ли я понимаю, что после использования move() всегда нужно сбрасывать стиль, если планируется ещё что-делать с элементом(наример, изменить размер)? Как-то мне не улыбается каждый раз сохранять десяток-другой атрибутов. И как узнать, в каком состоянии находится элемент — спрайт или не спрайт?
В принципе sprite режим это просто position:popup . Т.е. достаточно сделать скажем el.style#position = #fixed; и элемент перестанет быть спрайтом.
Это все атрибуты стиля которые я изменяю по ходу дела — фиксирую dimensions и устанавливаю left и top.
Т.е. для того чтобы вернуть на место (или зафиксировать) элемент который был спрайтом ему надо сказать новую positioning schema и соотв. установить left/top.
Вот метод dragEnded() из примера sdk/samples/ideas/moveable-windows/
type Wnd: Behavior
{
function dragEnded()
{
//stdout << "dragEnded\n";
const MAX_STEP = 20;
var x = this.box(#left, #inner, #view);
var y = this.box(#top, #inner, #view);
function anim()
{
var delta_x = (x - this.startingX) / 2;
var delta_y = (y - this.startingY) / 2;
if( delta_x < -MAX_STEP ) delta_x = -MAX_STEP;
else if( delta_x > MAX_STEP ) delta_x = MAX_STEP;
if( delta_y < -MAX_STEP ) delta_y = -MAX_STEP;
else if( delta_y > MAX_STEP ) delta_y = MAX_STEP;
x -= delta_x;
y -= delta_y;
this.move(x,y);
view.update();
if(!delta_x && !delta_y)
{
this.move(this.startingX,this.startingY);
this.style.clear(); // clear styles we've used in move()
return false;
}
return true;
}
this.timer(10,anim);
}
по окончанию drag он анимрованно возвращает блок к исходной позиции и делает
this.move(this.startingX,this.startingY);
this.style.clear(); // clear styles we've used in move()
т.е. блок опять становится position:absolute как он был объявлен в CSS.
