Cherche Sript pour déplacer un objet (stylo ou flèche) dans un cours

[Candie]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://planetegraphisme.creationforum.net/

Description du problème

Bonjour a tous
Quelqu'un a-t-il un script, marchant avec Windows 10, afin d'insérer dans un cours posé un objet proposé en début de cours et que le membre pourrait déplacer sur la ligne qu'il est en train de suivre ?
Ce serait un beau cadeau de noël que je ferai à mes membres pour leur faciliter la tâche.
Merci d'avance

[Candie]

bonjour.
up

[Candie]

up

[oxymore]

Bonsoir

Vous pouvez utiliser Jquery UI
https://jqueryui.com/draggable/

Collez ce code dans description de site

Code:

<script src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js></script>

Ensuite dans gestion des codes javascript en cochant sur les sujets collez ce code et enregistrez

Code:

$( document ).ready(function() {

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

Puis en début de vos cours collez ce code (le HTML doit être activé dans les messages )

Code:

<img src="http://www.icone-png.com/png/22/21757.png" class ="move" />

les images ayant la class "move" deviennent "draggable"

[cedric03]

bonjour Oxymore

merci pour le script , mais je répugne à activer le html, n'y aurait il pas un autre moyen ?

merci de ta réponse

[oxymore]

Bonsoir

Essayez avec ce code à placer dans gestion des codes javascript en cochant sur les sujets et enregistrez.
Cela va ajouter une image dans le 1er post et normalement vous pouvez la déplacer pour suivre le tuto...

Code:

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

$( document ).ready(function() {
$('.post-options:first').before('<div id="myDiv" style="margin-top:8px;"><img src="http://www.icone-png.com/png/22/21757.png" /></div>');
$('#myDiv').drags();
 
});

Vous pouvez bien sur remplacer le lien de l'image dans le code par le lien d'une autre image.

[lilas]

Merci

[cedric03]

merci oxymore

ça marche

merci

[lilas]

les 2 codes fonctionnent parfaitement avec Internet Explorer mais sous Firefox,
les icônes d'édition au dessus des messages s'évadent hors du cadre du forum...
et le fond personnalisé pour les messages ne s'étend pas comme il le devrait près de la bordure...



Un remède à suggérer ?



PS Je n'ai pas testé sur Chrome, je dois changer de PC pour le faire et il est tard au Québec... Demain

[Shawn ModdingGaming]

Ou le mieux installez aussi Chrome sur votre ordi: Navigateur Chrome, cela vous ferais gagner du temps !!!

Pour la suite, cela dépendra de vous ...

Cdt.

[cedric03]

bonjour

même constat ,j'ai des retours des membres qui ont d'autres navigateurs qui ont le texte qui est déplacer a gauche

une solution peut etre ? merci d'avance

[Shawn ModdingGaming]

Ligne 4 on vois ce code:

Code:

        opt = $.extend({handle:"",cursor:"move"}, opt);

Si vous remplacez le: ,cursor:"move"} par:

Code:

        opt = $.extend({handle:"",cursor:"fixe"}, opt);

Sa marcherais surement, je continue à analysé le code ...

[cedric03]

pour le moment ça n'a encore rien changé

mon texte est toujours a gauche ,ds chrome ,firefox et Edge

je vous remercie pour tous vos efforts

[lilas]

Ou le mieux installez aussi Chrome sur votre ordi: Navigateur Chrome, cela vous ferais gagner du temps !!!

Je n'impose pas de navigateurs à mes membres... Chrome est installé sur mon PC principal...

J'ai opté pour le Javascript et en modifiant avec ce que vous suggérez le problème persiste...
Belle fin de journée forum

[oxymore]

Bonjour

Essayez en mettant

Code:

after

à la place de

Code:

before

dans cette partie du code

Code:

$( document ).ready(function() {
$('.post-options:first').before('<div id="myDiv" style="margin-top:8px;"><img src="http://www.icone-png.com/png/22/21757.png" /></div>');
$('#myDiv').drags();
 
});

[cedric03]

bonjour Oxymore

en effet j'ai effectuer quelques petits changements sur ton script

au lieu de before j'ai mis after

puis je suis revenu a before et j'ai changer et a la place de "post-options:first " j'ai mis ""postbody ""

Code:

$('.postbody').before('<div id="myDiv" style="margin-top:25px;">

je crois qu'on peut encore améliorer

[oxymore]

Bonjour Cedric

On peut effectivement modifier cette partie du code qui définit l'emplacement pour placer l'image et les possibilités sont nombreuses ,-)

[cedric03]

oui les possibilités sont nombreux mais mon javascript est très limité

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »