<html>
<head>
<style>
html
{
prototype: dnd;
}
select { width:*; height:10em;}
select.source > option
{
draggable:only-move;
}
select.destination
{
accept-drop: selector( select.source > option );
drop:insert;
}
</style>
<script type="text/tiscript">
class dnd: Behavior
{
function onMouse( evt )
{
if( evt.type == Event.DRAG_REQUEST )
{
this._id = evt.target.id;
}
if( evt.type == ( Event.DROP | Event.SINKING ) )
{
stdout << 2 << "\n";
}
if( evt.type == ( Event.MOUSE_UP | Event.DRAGGING ) )
{
if( evt.target.@#class != "drop" )
{
stdout << this.$(#{this._id}) << "\n";
this.$(#{this._id}).detach();
stdout << this.$(#{this._id}) << "\n";
}
}
}
}
</script>
</head>
<body>
<div style="flow:horizontal">
<p>Source:<br/>
<select size=10 .source>
<option #i1>Item 1</option>
<option #i2>Item 2</option>
<option #i3>Item 3</option>
<option #i4>Item 4</option>
<option #i5>Item 5</option>
<option #i6>Item 6</option>
<option #i7>Item 7</option>
<option #i8>Item 8</option>
<option #i9>Item 9</option>
</select>
</p>
<p>Destination:<br/>
<select size=10 .destination>
</select>
</p>
</div>
</body>
</html>
Нужно, чтобы если DROP происходит не в destination, элемент из source по возвращении удалялся.
Как я понимаю, Event.DROP не происходит при отпускании мышки в области, где DROP запрещен.
Поэтому отлавливаю с помощью Event.MOUSE_UP | Event.DRAGGING.
Но после удаления элемент появляется снова.
Есть ли событие, которое происходит при отпускании мышки в область, где DROP запрещен?
Или можно как-нибудь по другому реализовать?