web-dev-qa-db-fra.com

comment puis-je créer des éléments créés dynamiquement draggable ()?

J'essaie de comprendre comment rendre les divs créés dynamiquement glissables, alors j'ai créé cette chose très simple pour m'aider. Je comprends que je dois utiliser l'événement on () avec un gestionnaire non dynamique. En laissant l'élément body gérer l'événement de clonage dans le JSfiddle lié, j'ai réussi à rendre les divs créées dynamiquement, mais elles ne sont pas déplaçables. Qu'est-ce que je fais mal?

Merci d'avance pour votre aide!

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});
javascriptjquerydraggable
12
thatpaintingelephant

au moment de la création, mettez la classe "draggable" ou id dans l'élément. (vous ne mettez pas la classe) et alors le code devrait fonctionner

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable()
17
KhanSharp

Je voudrais faire quelque chose comme ceci

J'appelle la méthode draggable après avoir ajouté les éléments au conteneur, comme ceci:

 $("<div class='bl pink'></div>").appendTo('.container').draggable();
9
nicosantangelo

J'ai eu le même problème. La réponse acceptée fonctionne certes, mais je recherchais une solution plus propre et plus centralisée. Je ne voulais pas appeler explicitement .draggable () à chaque endroit où mon script insérait de nouveaux éléments.

Ce que j’ai décidé, c’est d’écouter les insertions DOM sur l’élément parent, puis d’appliquer .draggable () sur les enfants insérés. Par exemple:

$("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); });

Découvrez ce violon pour une démo: http://jsfiddle.net/9hL7u95L/

4
Andrew Tevington

Ajoutez une classe déplaçable aux éléments ajoutés dynamiquement.

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink draggable'></div>"));
        $(".draggable").draggable();
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue draggable'></div>"));
        $(".draggable").draggable();
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral draggable'></div>"));
        $(".draggable").draggable();
    });

});
3
Thomas

Vous pouvez le faire de la manière suivante:

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink draggable'></div>"));
        $('.draggable').draggable();
    });

    $('.container').on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue draggable'></div>"));
        $('.draggable').draggable();
    });
    $('.container').on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral draggable'></div>"));
        $('.draggable').draggable();
    });
    $('.draggable').draggable();

});

Démo de travail

3
Harry

J’ai ajouté quelques morceaux à votre violon, espérons que cela vous aidera: http://jsfiddle.net/m3BXZ/8/

En gros, j'ai créé une fonction appelée startDrag qui rend les nouveaux blocs déplaçables:

function startDrag(){
    $(".bl").draggable();
}

Il existe de nombreuses façons de le faire, il suffit de trouver la solution qui vous convient le mieux.

3
azzy81

utilisation 

$("<div class='bl blue'></div>").draggable().appendTo($('.container'));

D&EACUTE;MO

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $("<div class='bl blue'></div>").draggable().appendTo($('.container'));
    });

    $('.container').on('click', '.blue', function () {
        $("<div class='bl blue'></div>").draggable().appendTo($('.container'));
    });
    $('.container').on('click', '.coral', function () {
        $("<div class='bl coral'></div>").draggable().appendTo($('.container'));
    });

    $(".draggable").draggable();
});

.ajouter à

2
Tushar Gupta

Essayez ceci (exemple):

       $('.btn-hotspot-add').click(function(){
            //Create element and append draggable action
            var element = $('<span class="hotspot"></span>').draggable({
                'containment': "parent",
                'stop': function(Elm){
                    //Sample stop action
                    var parentWith = Elm.target.offsetParent.offsetWidth;
                    var parentHeight = Elm.target.offsetParent.offsetHeight;
                    var x = Elm.target.offsetLeft;
                    var y = Elm.target.offsetTop;
                    console.log(parentWith+'x'+parentHeight+' - '+x+'x'+y );

                }
            });

            //Append draggable element to parent container
            $('#parent').append(element);
        });
0
Piotr Nowak