The drop part of drag and drop works. Now I just need to add additional drop targets for actually moving the note.
This commit is contained in:
parent
e3e3fa93d5
commit
c8a9b98599
|
@ -555,6 +555,10 @@ h1 {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note_div_dragging {
|
||||||
|
max-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
.note_holder_dragging {
|
.note_holder_dragging {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
|
@ -244,7 +244,7 @@ Editor.prototype.connect_note_controls = function ( store_control_buttons ) {
|
||||||
|
|
||||||
if ( this.grabber ) {
|
if ( this.grabber ) {
|
||||||
disconnectAll( this.grabber );
|
disconnectAll( this.grabber );
|
||||||
connect( this.grabber, "onmousedown", function ( event ) { self.pop_out( event ); } );
|
connect( this.grabber, "onmousedown", function ( event ) { self.start_drag( event ); } );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -683,15 +683,11 @@ Editor.prototype.reposition = function ( repeat ) {
|
||||||
setTimeout( function () { self.reposition( true ); }, 50 );
|
setTimeout( function () { self.reposition( true ); }, 50 );
|
||||||
}
|
}
|
||||||
|
|
||||||
Editor.prototype.pop_out = function ( event ) {
|
Editor.prototype.start_drag = function ( event ) {
|
||||||
var size = { "h": 100 };
|
var note_height = 100;
|
||||||
this.drag_mouse_position = event.mouse().page;
|
this.drag_mouse_position = event.mouse().page;
|
||||||
|
|
||||||
if ( getElementDimensions( this.div ).h > size.h ) {
|
addElementClass( this.div, "note_div_dragging" );
|
||||||
if ( this.iframe )
|
|
||||||
setElementDimensions( this.iframe, size );
|
|
||||||
setElementDimensions( this.div, size );
|
|
||||||
}
|
|
||||||
|
|
||||||
// add a blank div to the area where the editor is popping out from. this lets the user easily
|
// add a blank div to the area where the editor is popping out from. this lets the user easily
|
||||||
// see where the editor came from
|
// see where the editor came from
|
||||||
|
@ -708,14 +704,15 @@ Editor.prototype.pop_out = function ( event ) {
|
||||||
if ( this.drag_mouse_position.y < position.y )
|
if ( this.drag_mouse_position.y < position.y )
|
||||||
new_position = { "y": this.drag_mouse_position.y };
|
new_position = { "y": this.drag_mouse_position.y };
|
||||||
// if the click position is below the editor, then move the bottom of the editor down to it
|
// if the click position is below the editor, then move the bottom of the editor down to it
|
||||||
else if ( this.drag_mouse_position.y > position.y + size.h )
|
else if ( this.drag_mouse_position.y > position.y + note_height )
|
||||||
new_position = { "y": this.drag_mouse_position.y - size.h };
|
new_position = { "y": this.drag_mouse_position.y - note_height };
|
||||||
|
|
||||||
if ( new_position ) {
|
if ( new_position ) {
|
||||||
new_position.y -= getElementPosition( "center_content_area" ).y;
|
new_position.y -= getElementPosition( "center_content_area" ).y;
|
||||||
|
setElementPosition( this.holder, new_position );
|
||||||
if ( this.iframe )
|
} else {
|
||||||
setElementPosition( this.iframe, new_position );
|
new_position = { "y": getElementPosition( this.holder ).y };
|
||||||
|
new_position.y -= getElementPosition( "center_content_area" ).y;
|
||||||
setElementPosition( this.holder, new_position );
|
setElementPosition( this.holder, new_position );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -727,6 +724,7 @@ Editor.prototype.pop_out = function ( event ) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
connect( window, "onmousemove", function ( event ) { self.drag( event ) } );
|
connect( window, "onmousemove", function ( event ) { self.drag( event ) } );
|
||||||
|
connect( window, "onmouseup", function ( event ) { self.drop( event ) } );
|
||||||
}
|
}
|
||||||
|
|
||||||
Editor.prototype.drag = function( event ) {
|
Editor.prototype.drag = function( event ) {
|
||||||
|
@ -753,6 +751,30 @@ Editor.prototype.drag = function( event ) {
|
||||||
this.drag_mouse_position = new_mouse_position;
|
this.drag_mouse_position = new_mouse_position;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Editor.prototype.drop = function( event ) {
|
||||||
|
disconnectAll( window );
|
||||||
|
|
||||||
|
removeElementClass( this.div, "note_div_dragging" );
|
||||||
|
removeElementClass( this.holder, "note_holder_dragging" );
|
||||||
|
removeElementClass( this.note_controls, "invisible" );
|
||||||
|
removeElementClass( this.grabber, "note_grabber_focused" );
|
||||||
|
addElementClass( getElement( "note_shadow_" + this.id ), "undisplayed" );
|
||||||
|
|
||||||
|
this.drag_mouse_position = null;
|
||||||
|
|
||||||
|
var drop_targets = getElementsByTagAndClassName( "div", "note_drop_target" );
|
||||||
|
var target_position = getElementPosition( drop_targets[ 0 ] );
|
||||||
|
for ( var i in drop_targets ) {
|
||||||
|
removeElement( drop_targets[ i ] );
|
||||||
|
}
|
||||||
|
|
||||||
|
var container_position = getElementPosition( "center_content_area" );
|
||||||
|
setElementPosition( this.holder, {
|
||||||
|
"x": target_position.x - container_position.x,
|
||||||
|
"y": target_position.y - container_position.y
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
Editor.prototype.key_pressed = function ( event ) {
|
Editor.prototype.key_pressed = function ( event ) {
|
||||||
signal( this, "key_pressed", this, event );
|
signal( this, "key_pressed", this, event );
|
||||||
|
|
||||||
|
|
Reference in New Issue