[JSP][DRAG AND DROP]

Bonjour, j'ai developpé une page JSP qui presente un "planning" de rendez vous sous forme d'un tableau a deux entrées:

horizontalement une liste de "consultant",verticalement les "heures de la journée".
Le tout géré par une action struts.
Dans une "case" du planning, l'utilisateur clique et la il a la possibilité d'affecter un "rendez vous " a un "consultant" si la case du planning est vide , ou de donner suite a un rendez vous si elle pleine etc ....

Ce que j'aimerais, c'est faire la "modification du rendez vous" (heure,consultant)..en "Drag & Drop" avec du javascript....est ce que je reve? ou c'est possible?
merci de votre aide.

pour info le tableau est un bete tableau HTML, dans chaque case je fais un bete lien vers des JSP selon l'occupation ou pas de la tranche horaire.

j'ai piosté ( il y a longtemps) une solution qui permet de faire ca en full javascript.

Fais une recherche, avec un peu de chance tu trouveras ca...

@+

Merci.
t'as pas un souvenir de forum sur le quel tu l'as posté? (javascript?j2ee?)

ca devait etre J2EE ou JAVA, j'utilises pas le forum javascript...

@+

je t'apprends pas que des post aux noms de "RanDomX" y en a plétore sur ce forum.
j'ai trouvé des trucs en JS mais qui ne sont pas de toi. j'ai bien envie de m'en inspirer mais j'ai peur de faire du farfelu. tu n'as pas la moindre idée de ce que tu avais mis dans le titre? c'etait a quelle époque?

attend un peu je cherches et je poste

bon voila je te poste tous et tu triera:

Gestion des evenements de souris:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
var _mouse_dragging = false;
var _mouse_down = false;
var _lastX = 0;
var _lastY = 0;
 
function MouseEvents_mouseDown( e )
{
    _mouse_down = true;
    if( ( browser.isNS && e.which != 1 ) || ( browser.isIE && event.button != 1 ) )
    {
        return true;
    }
    var x = ( browser.isNS ) ? e.pageX : event.clientX + document.body.scrollLeft;
    var y = ( browser.isNS ) ? e.pageY : event.clientY + document.body.scrollTop;
    _lastX = x;
    _lastY = y;
    return mouseDown( x, y );
}
 
function MouseEvents_mouseMove( e )
{
    var x = ( browser.isNS ) ? e.pageX : event.clientX + document.body.scrollLeft;
    var y = ( browser.isNS ) ? e.pageY : event.clientY + document.body.scrollTop;
    if( !_mouse_dragging )
    {
        if( _mouse_down && ( Math.abs( x - _lastX ) > 0 || Math.abs( y - _lastY ) > 0 ) )
        {
            _mouse_dragging = true;
        }
        _lastX = x;
        _lastY = y;
    }
 
    if( _mouse_dragging )
    {
        return mouseDrag( x, y );
    }
    else
    {
        return mouseMove( x, y );
    }
}
 
function MouseEvents_mouseUp( e )
{
    _mouse_dragging = false;
    _mouse_down = false;
    var x = ( browser.isNS ) ? e.pageX : event.clientX + document.body.scrollLeft;
    var y = ( browser.isNS ) ? e.pageY : event.clientY + document.body.scrollTop;
    return mouseUp( x, y );
}
 
function MouseEvents_mouseOut( e )
{
    var x = ( browser.isNS ) ? e.pageX : event.clientX + document.body.scrollLeft;
    var y = ( browser.isNS ) ? e.pageY : event.clientY + document.body.scrollTop;
    if( browser.isNS && e.target != document )
    {
        routeEvent( e );
    }
    else
    {
        return mouseOut( x, y );
    }
}
 
function MouseEvents_onScroll()
{
    _mouse_dragging = false;
    _mouse_down = false;
    handleScroll();
    return false;
}
 
 
function MouseEvents_mouseOver( e )
{
    var x = ( browser.isNS ) ? e.pageX : event.clientX + document.body.scrollLeft;
    var y = ( browser.isNS ) ? e.pageY : event.clientY + document.body.scrollTop;
    if( browser.isNS && e.target != document )
    {
        routeEvent( e );
    }
    else
    {
        return mouseOver( x, y );
    }
}
 
// Override the following functions to do what you like:
// mouseDown, mouseMove, mouseUp, mouseOver, mouseOut, mouseDrag
 
function mouseDown( x, y )
{
    return false;
}
 
function mouseMove( x, y )
{
    return false;
}
 
function mouseUp( x, y )
{
    return false;
}
 
function mouseOver( x, y )
{
    return false;
}
 
 
function mouseOut( x, y )
{
    return false;
}
 
function mouseDrag( x, y )
{
    return false;
}
 
function handleScroll()
{
    return false;
}
 
// Assigns event handling capabilities to the underlying document
function setupMouseEvents()
{
    document.onmousedown = MouseEvents_mouseDown;
    document.onmousemove = MouseEvents_mouseMove;
    document.onmouseup = MouseEvents_mouseUp;
    document.onmouseover = MouseEvents_mouseOver;
    document.onmouseout = MouseEvents_mouseOut;
    window.onscroll = MouseEvents_onScroll;
    if( browser.isNS )
    {
        // Commenting out next line turns on scrolling but turns off drag-and-drop
        // document.captureEvents( Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP );
    }
}
 
setupMouseEvents();

gestions du drag:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
var floatingIframe     = "iframe0";
var divNameInTitleHtml = "title";
 
function initFloatingLayer(newtitle)
{
    setIframeSize(newtitle, floatingIframe);
    showFloatingLayer();
}
 
function moveFloatingLayer(x, y)
{
   moveTo(floatingIframe, x, y);
}
 
function hideFloatingLayer()
{
    var layer = document.all[floatingIframe].style;
    layer.visibility = "hidden";
    layer.left = 0;
    layer.top  = 0;
}
 
function showFloatingLayer()
{
    var layer = document.all[floatingIframe].style;
    layer.visibility = "visible";
}
 
function setIframeSize(title, iframe)
{
    eval(iframe+".document").all[divNameInTitleHtml].innerHTML = "<nobr>" + title + "</nobr>";
    var width  = eval(iframe+".document").all[divNameInTitleHtml].offsetWidth;
    var height = eval(iframe+".document").all[divNameInTitleHtml].offsetHeight;
 
    var layer = document.all[floatingIframe].style;
    layer.width  = width  + 8;
    layer.height = height + 4;
}
 
function moveTo(divName,x,y)
{
 
    var layer = document.all[floatingIframe].style;
    if ( x!=null )
    {
        layer.pixelLeft = x + 10;
    }
 
    if ( y!=null )
    {
        layer.pixelTop = y + 10; 
    }
}
 
function writeHTML()
{
    return '<IFRAME name="' + floatingIframe +'" STYLE="position:absolute; visibility:hidden; background-color:red; width:100; height:25; " SRC="' + urlToTitleHtml + '" scrolling=no frameborder=0>' + '</IFRAME>';
}

et le handlers d'evenement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
 
/*
 * The EventManager creates EventHandler objects and is responsible for
 * coordinating all EventHandlers when events are fired. When one EventHandler
 * fires an event, it is implemented to iterate over every EventHandler the
 * EventManager has and notify them. 
 */
function EventManager()
{
    this.handlers = new Array();
    this.createEventHandler = EventManager_createEventHandler;
    this.removeEventHandler = EventManager_removeEventHandler;
    this.getEventHandler = EventManager_getEventHandler;
    this.addEventHandler = EventManager_addEventHandler;
}
 
function EventManager_createEventHandler( id )
{
    var list = new EventHandler( id );
    var found = false;
    for( var i = 0; i < this.handlers.length; i++ )
    {
        if( this.handlers[i].id == id )
        {
            this.handlers[i] = list;
            found = true;
        }
    }
    if( !found )
    {
        this.handlers[ this.handlers.length ] = list;
    }
    return list;
}
 
function EventManager_removeEventHandler( handler )
{
    for( var i = 0; i < this.handlers.length; i++ )
    {
        if( this.handlers[i].id == handler.id )
        {
            this.handlers[i] = null;
        }
    }
}
 
function EventManager_getEventHandler( id )
{
    for( var i = 0; i < this.handlers.length; i++ )
    {
        if( this.handlers[i].id == id )
        {
            return this.handlers[i];
        }
    }
    return null;
}
 
function EventManager_addEventHandler( handler )
{
    if( this.handlers != null )
    {
        var found = false;
        for( var i = 0; i < this.handlers.length; i++ )
        {
            if( this.handlers[i].id == this.handler.id )
            {
                found = true;
            }
        }
        if( !found )
        {
            this.handlers[ this.handlers.length ] =  handler;
        }
    }
}
 
/*
 * The EventHandler is responsible for creating and consuming events. Each
 * EventHandler is created and organized through the EventManager. Do not
 * instantiate this object directly or it will not be registered as a listener.
 */
function EventHandler( id )
{
    this.id = id;
    this.fireEvent = EventHandler_fireEvent;
    this.notified = EventHandler_notified;
    this.toString = EventHandler_toString;
}
 
function EventHandler_fireEvent( data )
{
    var event = new Event( this, data );
    var handlers = top.eventManager.handlers;
    for( var i = 0; i < handlers.length; i++ )
    {
        if( handlers[i] != null )
        {
            if( handlers[i].notified != null )
            {
                handlers[i].notified( event );
            }
        }
    }
}
 
function EventHandler_notified( event )
{
    window.status = event.toString();
}
 
function EventHandler_toString()
{
    return "[EventHandler,id=" + this.id + "]";
}
 
/*
 * The Event object is the event that is being fired, and has a reference to
 * the EventHandler source that fired the event as well as an arbitrary 
 * JavaScript data object, such as a string or a form element. 
 */
function Event( source, data )
{
    this.source = source;
    this.data = data;
    this.toString = Event_toString;
}
 
function Event_toString()
{
    return "[source=" + this.source + ",data=" + this.data + "]";
}
 
/*
 * Initialize a single global EventManager. This needs to be done in a
 * container page, not on a component that might change its document location
 * or the script will unload and the object will not be executable. 
 */
if( top.eventManager == null )
{
    top.eventManager = new EventManager();
}

Pe que tout ne te servira pas.

@+

tres bien.je me débrouillerais avec ça.
encore merci.