JsPlumb - Les points de terminaison ne rafraîchissent pas la position lorsqu'ils sont utilisés sur un élément glissant

Question

JsPlumb - Les points de terminaison ne rafraîchissent pas la position lorsqu'ils sont utilisés sur un élément glissant

Demandé el 24 de Août, 2011: Quand la question a-t-elle été
6745 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai commencé à utiliser jsPlumb et JQuery, je veux connecter des éléments glissants mais si j'ajoute l'élément mais si j'ajoute le comportement du draggable avant la connexion, alors la connexion ne rafraîchit pas la position.

Mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>

        <style type="text/css">
            .window {
                background-color: white;
                border: 3px solid #346789;
                color: black;
                font-family: helvetica;
                font-size: 0.8em;
                height: 12em;
                opacity: 0.8;
                padding: 0.5em;
                position: absolute;
                width: 14em;
                z-index: 20;
            }
        </style>

        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery-ui.min.js"></script>
        <script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
    </head>
    <body>
    <div>
        <div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
        <div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
    </div>
    <script type="text/javascript">

        $(document).ready(function() {

            $(".window").draggable();

            var a = $("#a");
            var b = $("#b");
            jsPlumb.connect({
                source:a,
                target:b,
                connector:["Bezier",68],
                endpoints:[
                    ["Dot",{radius:12}],
                    ["Rectangle",{width:20,height:30}]
                ]
            });
        });
    </script>
    </body>
    </html>

Demandé el 24 de Août, 2011 par Den

Answer 1

2 Réponses

Answer 2

5voto

Utilisateur non enregistré Points 0

J'ai écrit jsPlumb.

la raison pour laquelle il ne se rafraîchit pas est qu'il n'a aucun moyen de savoir que quelque chose est déplacé. au lieu d'appeler $(".window").draggable(), vous devez soit laisser jsPlumb le faire pour vous lorsqu'une connexion est établie, soit par le biais de cette méthode :

jsPlumb.draggable($(".window")) ;

la première option n'initialisera pas le glissement pour toute fenêtre qui n'a pas de connexion. la seconde le fera.

Répondu el 12 de Octobre, 2011 par Utilisateur non enregistré (0 Points )

Answer 3

1voto

DMINATOR Points 451

Il y a plusieurs façons de le faire - se référer à la rubrique Documentation de jsPlumb

mais en général, vous pouvez utiliser :

Id de l'élément
Tableau d'éléments
Ou un sélecteur (par exemple le sélecteur de classe mentionné précédemment) : jsPlumb.draggable($(".window"));

Voici un exemple concret :

<!DOCTYPE html>
<html>
<head>
    <title>JS plumb test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>

    <style>
        .window { 
            background-color: #EEEEEF;
            border: 1px solid #346789;
            border-radius: 0.5em;
            box-shadow: 2px 2px 19px #AAAAAA;
            color: black;
            height: 5em;
            position: absolute;
            width: 5em;
            cursor: pointer;
        }
    </style>

    <script>

        jsPlumb.ready(function () {

            // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)

            //jsPlumb.draggable("container0");
            //jsPlumb.draggable(["container0", "container1"]);
            jsPlumb.draggable($(".window"));

            //perform operation only after DOM is loaded
            var e0 = jsPlumb.addEndpoint("container0"),
                e1 = jsPlumb.addEndpoint("container1");

            jsPlumb.connect({ source: e0, target: e1 });

        });

    </script>

</head>
 <body >
     <div class="window" style="left: 20px" id="container0">
     </div>

    <div class="window"  style="left: 200px" id="container1">
    </div>
</body>
</html>

Répondu el 18 de Février, 2013 par DMINATOR (451 Points )

JsPlumb - Les points de terminaison ne rafraîchissent pas la position lorsqu'ils sont utilisés sur un élément glissant

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

JsPlumb - Les points de terminaison ne rafraîchissent pas la position lorsqu'ils sont utilisés sur un élément glissant

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: