События, возникающие при перетаскивании
Вероятно, вам потребуется определять момент начала и конца перетаскивания для воспроизведения специальных эффектов, таких как визуальное выделение перетаскиваемого объекта. Определение этих событий легко выполняется с помощью функций dojo.subscribe и dojo.connect. В примере 7.3 приводится измененная версия примера 7.2.
Пример 7.3. Соединение и подписка на получение событий перетаскивания
<html>
<head>
<title>Yet More Fun with Moveable!</title>
<style type="text/css">
.note {
background: #FFFFBF;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
width: 302px;
height: 300px;
margin : 0px;
padding : 0px;
}
.noteHandle {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
cursor :pointer;
background: #FFFF8F;
width : 300px;
height: 10px;
margin : 0px;
padding : 0px;
}
.movingNote {
background : #FFFF3F;
}
</style>
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dojo.dnd.Moveable");
dojo.addOnLoad(function() {
//создать и сохранить ссылки на перемещаемые объекты
//для последующего использования.
var m1 = new dojo.dnd.Moveable("note1",
{handle : "dragHandle1"});
var m2 = new dojo.dnd.Moveable("note2",
{handle : "dragHandle2"});
//темы широковещательных сообщений для всех
//перемещаемых элементов.
dojo.subscribe("/dnd/move/start", function(node){
console.log("Start moving", node);
});
dojo.subscribe("/dnd/move/stop", function(node){
console.log("Stop moving", node);
});
//подсветить фон перемещаемого объекта...
//подключить только к перемещаемым объектам.
dojo.connect(m1, "onMoveStart", function(mover){
console.log("note1 start moving with mover:", mover);
dojo.query("#note1 > textarea").addClass("movingNote");
});
dojo.connect(m1, "onMoveStop", function(mover){
console.log("note1 stop moving with mover:", mover);
dojo.query("#note1 > textarea").removeClass("movingNote");
});
});
</script>
</head>
(body)
<div id="note1">
<div id='dragHandle1' class="noteHandle"></div>
<textarea class="note">Note1</textarea>
</div>
<div id="note2">
<div id='dragHandle2' class="noteHandle"></div>
<textarea class="note">Note2</textarea>
</div>
(/body)
</html>
Комментарии:
Нету комментариев для вывода...