84 lines
1.6 KiB
PHTML
84 lines
1.6 KiB
PHTML
|
<style>
|
||
|
|
div#entete {
|
||
|
|
width:45%;
|
||
|
|
float:left;
|
||
|
|
border:1px solid #000000;
|
||
|
|
height:400px;
|
||
|
|
overflow:auto;
|
||
|
|
margin:5px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#dico {
|
||
|
|
width:45%;
|
||
|
|
height:400px;
|
||
|
|
float:right;
|
||
|
|
border:1px solid #000000;
|
||
|
|
overflow:auto;
|
||
|
|
margin:5px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#entete li {
|
||
|
|
margin-left:20px;
|
||
|
|
background-color:#4D90FE;
|
||
|
|
border-top:2px solid #ffffff;
|
||
|
|
border-bottom:2px solid #ffffff;
|
||
|
|
line-height:20px;
|
||
|
|
font-weight:bold;
|
||
|
|
color:#000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#dico li {
|
||
|
|
list-style-type:none;
|
||
|
|
padding-left:10px;
|
||
|
|
background-color:#4D90FE;
|
||
|
|
border-top:2px solid #ffffff;
|
||
|
|
border-bottom:2px solid #ffffff;
|
||
|
|
line-height:20px;
|
||
|
|
font-weight:bold;
|
||
|
|
color:#000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div id="entete">
|
||
|
|
<h1 class="ui-widget-header">Entete</h1>
|
||
|
|
<div class="ui-widget-content">
|
||
|
|
<ol>
|
||
|
|
<li class="placeholder">Placer les elements ici</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="dico">
|
||
|
|
<h1 class="ui-widget-header">Elements disponibles</h1>
|
||
|
|
<ul>
|
||
|
|
<?php foreach($this->elements as $element) {?>
|
||
|
|
<li><?=$element?></li>
|
||
|
|
<?php }?>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$( "#dico li" ).draggable({
|
||
|
|
appendTo: "body",
|
||
|
|
helper: "clone"
|
||
|
|
});
|
||
|
|
$( "#entete ol" ).droppable({
|
||
|
|
activeClass: "ui-state-default",
|
||
|
|
hoverClass: "ui-state-hover",
|
||
|
|
accept: ":not(.ui-sortable-helper)",
|
||
|
|
drop: function( event, ui ) {
|
||
|
|
$( this ).find( ".placeholder" ).remove();
|
||
|
|
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
|
||
|
|
}
|
||
|
|
}).sortable({
|
||
|
|
items: "li:not(.placeholder)",
|
||
|
|
sort: function() {
|
||
|
|
// gets added unintentionally by droppable interacting with sortable
|
||
|
|
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
|
||
|
|
$( this ).removeClass( "ui-state-default" );
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|