Conveniently complete schedules with jQuery
This story happened with Dmitry Dubovitsky - the programmer of Pirogov's Bureau.
Once it happened to me to be engaged in one very interesting project. According to the technical requirements, it was necessary to fill out the schedule of occupations of the fitness club in a certain XML. In principle, nothing complicated - read the XML, populated the table with the data, but ... How will the client edit the schedule and edit the xml file? hands?
The solution is simple - it can be done with the mouse!
This is where the fun begins!
The fact is that for each lesson there may be different instructors, different sports halls in the club, not to mention the different names of the classes - in fact, these are ordinary lists that are filled out day after day by many similar organizations.
There was an interesting idea - why not make it so that all columns of the table (the name of the instructor, the name of the program, the hall) can be dragged directly onto the cell with the occupation?
Beautiful and technical.
Implementing it is not so difficult.
To begin, fill in the page with a “skeleton”: the times and days of the week in the table will be dynamically stamped.
')
In order not to suffer, look directly at the source or the whole thing.
page content skeleton:
and jquery code with necessary functions. It is necessary to insert $ (document) .ready () into the function:
As a result, we will get the opportunity to drag the instructors themselves, halls and classes!
Of course, the solution is still raw, we still need to implement the removal, replacement and other chips, however, the idea has already been implemented.
PS: Help from the source:
jqueryui.com/demos/droppable
jqueryui.com/demos/draggable
Once it happened to me to be engaged in one very interesting project. According to the technical requirements, it was necessary to fill out the schedule of occupations of the fitness club in a certain XML. In principle, nothing complicated - read the XML, populated the table with the data, but ... How will the client edit the schedule and edit the xml file? hands?
The solution is simple - it can be done with the mouse!
This is where the fun begins!
The fact is that for each lesson there may be different instructors, different sports halls in the club, not to mention the different names of the classes - in fact, these are ordinary lists that are filled out day after day by many similar organizations.
There was an interesting idea - why not make it so that all columns of the table (the name of the instructor, the name of the program, the hall) can be dragged directly onto the cell with the occupation?
Beautiful and technical.
Implementing it is not so difficult.
To begin, fill in the page with a “skeleton”: the times and days of the week in the table will be dynamically stamped.
')
In order not to suffer, look directly at the source or the whole thing.
page content skeleton:
<body>
<table id= "timetable" width= "1100" border= "1" align= "center" >
<tbody><tr><th></th></tr></tbody>
</table>
<ul class = "programs" >
<li>Abs-30</li>
...
<li>Jazz</li>
</ul>
<ul class = "zals" >
<li> </li>
<li> </li>
</ul>
<ul class = "instructors" >
<li></li>
...
<li></li>
</ul>
</body>
* This source code was highlighted with Source Code Highlighter .and jquery code with necessary functions. It is necessary to insert $ (document) .ready () into the function:
$( 'ul.instructors, ul.zals, ul.programs' ).draggable();
//
// draggable IE
// :
if (!$.browser.msie) {$( 'ul.instructors, ul.zals, ul.programs' ).draggable();}
$( "ul.programs li, ul.instructors li, ul.zals li" ).draggable({revert: 'invalid' , zIndex: 10});
//
// "revert: 'invalid'" ,
//
// droppable
// accept ( , )
$( "#timetable td" ).droppable({accept: "ul.programs li, ul.instructors li, ul.zals li" ,
hoverClass: "hover" , // CSS , ,
drop: function ( event , ui) { // ,
var class_to_find= '' ; // , .
if ($(ui.draggable).parent().hasClass( 'instructors' )) class_to_find= 'instructor' ;
if ($(ui.draggable).parent().hasClass( 'programs' )) class_to_find= 'program' ;
if ($(ui.draggable).parent().hasClass( 'zals' )) class_to_find= 'zal' ;
// ui.draggable - (li).
// .parent() - DOM , ul.
// ul , , .
// class_to_find
$( this ).find( 'div.' +class_to_find).html($(ui.draggable).text()).css( 'display' , 'none' ).fadeIn();
// $(this) - .
// :
//
// <div class="instructor"/>
// <div class="program"/>
// <div class="zal"/>
//
// div , class_to_find
// div`
// ui.draggable text()
//
// .css('display','none').fadeIn(); .
//
$(ui.draggable).css( 'top' , 'auto' ).css( 'left' , 'auto' );
// - , "+" .
if (($( this ).find( 'div.instructor' ).text()!= '' ) &&
($( this ).find( 'div.program' ).text()!= '' ) &&
($( this ).find( 'div.zal' ).text()!= '' ))
{$( this ).addClass( 'added' ); }
// , 'added'
}
});
* This source code was highlighted with Source Code Highlighter .As a result, we will get the opportunity to drag the instructors themselves, halls and classes!
Of course, the solution is still raw, we still need to implement the removal, replacement and other chips, however, the idea has already been implemented.
PS: Help from the source:
jqueryui.com/demos/droppable
jqueryui.com/demos/draggable
Source: https://habr.com/ru/post/94347/
All Articles