Drag n' drop - aide pour la création d'un module

mgasse
Javascript

Bonjour,

Je voudrais créer une zone drag n drop pour un module sur un CMS php maison.

J'ai une sidebar qui contient des modèles. et dans ma zone de drop j'ai des diapositives. donc quand je drag un modèle dans ma zone de diapositive, je veux qu'elle puisse prendre l'ordre dans laquel je l'ai placé et qu'elle puisse prendre le format HTML d'une nouvelle diapositive, donc si je l'ai mis entre la diapo1 et la diapo2, je voudrais que ma nouvelle diapo ait lordre 2 et que ma diapo 2 ait l'ordre 3 ainsi de suite.

Voici une image pour aider mes explications

Vous pouvez me contactez en tout temps sur gasse.mathieu@gmail.com

Votre aide serait beaucoup apprécié.

Merci.

Mon code qui fonctionne pour réordonner mes diapositives.

$('.slide-drag').sortable({
opacity: 0.6,
helper:'',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
axis: "y",
revert: true,
scroll: false,
update: function(event, ui){
var order = $(".slide-drag").sortable( "serialize" );
$.post("update_order.php",order,function(theResponse){
$('#categorysavemessage').slideDown('slow');
$('#categorysavemessage').html(theResponse);
setTimeout(function() {
$('#categorysavemessage').slideUp('slow');
}, 2000); // <-- time in milliseconds
});
}
});

2 réponses

tonymx227

Rien de plus simple avec HTML5 et son DrangAndDrop.

Lien (JS pure) : http://www.html5rocks.com/en/tutorials/dnd/basics/?redirect_from_locale=fr

Un exemple (jQuery) à compléter que je viens de faire :

HTML :

<div class="models">
<div draggable="true" class="models-model isdraggable">Model1</div>
<div draggable="true" class="models-model isdraggable">Model2</div>
<div draggable="true" class="models-model isdraggable">Model3</div>
</div>
<div class="diapos">
<div draggable="true" class="diapos-diapo isdraggable">diapo1</div>
<div draggable="true" class="diapos-diapo isdraggable">diapo2</div>
<div draggable="true" class="diapos-diapo isdraggable">diapo3</div>
</div>

JS : 

$('div.isdraggable').on('dragstart', function(){
}).on('drag', function(){
}).on('dragenter', function(){
}).on('dragleave', function(){
}).on('dragover', function(){
}).on('drop', function(){
}).on('dragend', function(){
});
mgasse
Auteur

Merci, J'ai réussi finalement à trouver quelque chose avec jQuery ui.