salut, Je veux enregistrer la position des articles abandonnés à la base de données [ASPX, JavaScript]. L'utilisateur peut déposer n'importe quel numéro d'élément, redimensionner et supprimer [masquer] et enfin lorsqu'il est appuyé sur le bouton "Enregistrer", il doit être enregistré dans la base de données. J'ai un code pour le faire dans goutte / arrêt, mais il enregistre tous les éléments abandonnés que je veux enregistrer uniquement à l'étape finale. Je suppose que beaucoup de développeur auraient déjà dû le faire, alors veuillez suggérer du code.
$(function() {
$('#frame img').live('mousemove', function(event) {
$('#frame img').resizable().parent().draggable();
});
});
$(function() {
$('#frame img').live('dblclick', function(event) {
// $(this).resizable("destroy") not working
$(this).hide();
//$(this).unbind("resizable"); not working
//$(this).removeclass(); not working
});
});
$(document).ready(function() {
//Counter
counter = 0;
//Make element draggable
$("img").draggable({
helper: 'clone',
containment: '#frame',
//When first dragged
stop: function(ev, ui) {
var pos = $(ui.helper).offset();
objName = "#clonediv" + counter
$(objName).css({ "left": pos.left, "top": pos.top });
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop: function(ev, ui) {
var pos = $(ui.helper).offset();
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
var pos = $(ui.helper).offset();
counter++;
var element = $(ui.helper).clone();
//var element = element1.resizable();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id", "clonediv" + counter);
//$(".tempclass").attr("onclick",function(){ $(this).remove(););
$("#clonediv" + counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "dragged" + RegExp.$1
//console.log(itemDragged)
//alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
$("#clonediv" + counter).addClass(itemDragged);
}
}
});
//Make the element resizable
});
6 Réponses :
Une manière peut être de placer les coordonnées, sur l'arrêt de la glisser, dans un champ caché que vous pouvez ensuite lire dans le code derrière et stocker dans la DB.
Lorsque vous rendant la page, vous devez également remplir le champ et utiliser JavaScript pour revenir les objets à leur place.
En outre, il pourrait être pratique de mentionner quel code derrière la langue utilisez. C #, PHP, Java, Quoi?
J'utilise c #, asp.net et javascript
En supposant que vos éléments sont des éléments de liste sous une liste avec un identifiant de puis postez ceci sur votre serveur côté. Sans connaître plus de détails, je ne peux pas être sûr à 100% si c'est tout ce qui est requis. P> sur la charge de la page, en boucle simplement à travers les emplacements et ajoutez un attribut à votre Bien sûr, vous devrez peut-être aussi faire P> éléments code>. jQuery h2>
Li code > tels que (supposer PHP) p> html / php h2>
CSS H2>
#items {
position: relative;
}
#items li {
position: absolute;
}
J'utilise c #, javascript et asp.net. Je dépose les images sur la div et essaye de les sauvegarder sur la fonction OnClick.
@Vani vous avez marqué JQuery, alors je suppose que vous utilisez cette bibliothèque. La sortie sera à peu près la même, échangez simplement le PHP ECHO avec l'équivalent .NET.
u r droit j'utilise jquery plugin. Le scénario est peu difficile à expliquer. Je n'utilise aucun élément de la liste ici, en faisant glisser le clone de l'image de Div1 en Div2. Je veux enregistrer les images dans Div2 à la base de données. S'il vous plaît voir le code ci-dessus
basé sur votre réponse à la question ci-dessus:
"Je veux enregistrer les images dans Div2 à la base de données. Veuillez consulter le code ci-dessus"
Il semble que tout ce que vous avez besoin de faire est sur arrêtez, obtenez les éléments d'enfant de div2.
jQuery serait ... Ceci retournerait une chaîne délimitée de tous les SRC de l'IMG div2.
Essayez d'utiliser la position de la souris
J'ai déjà fait cela pour l'un de mes projets de classe. Étant donné que je n'avais qu'un seul semaine à mettre en œuvre, ce n'était pas vraiment une bonne mise en œuvre. La façon dont je l'ai fait était chaque fois que l'utilisateur traîne et goutte, j'ai eu la finale X.Location et Y.Location de JavaScript et appelez le service Web ASMX où je vais envoyer (x, y). Dans le fichier ASMX, j'ai écrit le code pour l'enregistrer dans la base de données.
Donc, vous ne voulez pas les sauver jusqu'à la fin?
Vous ajoutez le clone à #Frame sur la chute, à ce stade, donnez-lui une classe pour indiquer son élément abandonné. Je mettrais une référence à l'objet Intial dans le «Ref 'Attr, au lieu de la classe.
La méthode de clic doit être similaire à (en supposant un seul message pour enregistrer tous les éléments supprimés (x , y, largeur, hauteur, identifiant d'objet original)): onclick
+1 parce que je suis exactement à la même situation que vous êtes en ce moment
haha je n'ai pas encore commencé avec ça, même si j'ai un sentiment je vais suivre la réponse d'Alex