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

+2
oxymore
Candie
6 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

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

Message par Candie Ven 16 Déc 2016 - 15:04

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 Very Happy
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


Dernière édition par Candie le Mar 3 Jan 2017 - 8:05, édité 1 fois
Candie

Candie
***

Féminin
Messages : 180
Inscrit(e) le : 05/11/2012

http://planetegraphisme.creationforum.net/
Candie a été remercié(e) par l'auteur de ce sujet.

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

Message par Candie Sam 17 Déc 2016 - 11:02

bonjour.
up
Candie

Candie
***

Féminin
Messages : 180
Inscrit(e) le : 05/11/2012

http://planetegraphisme.creationforum.net/
Candie a été remercié(e) par l'auteur de ce sujet.

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

Message par Candie Mar 20 Déc 2016 - 18:47

up
Candie

Candie
***

Féminin
Messages : 180
Inscrit(e) le : 05/11/2012

http://planetegraphisme.creationforum.net/
Candie a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par oxymore Mar 20 Déc 2016 - 21:05

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"
oxymore

oxymore
***

Messages : 141
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

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

Message par cedric03 Mer 21 Déc 2016 - 10:19

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
cedric03

cedric03
Nouveau membre

Messages : 19
Inscrit(e) le : 20/12/2016

http://planetegraphisme.creationforum.net
cedric03 a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par oxymore Mer 21 Déc 2016 - 19:47

Bonsoir

Essayez avec ce code à placer dans gestion des codes javascript en cochant sur les sujets et enregistrez.
Cela va ajouter une image Cherche Sript pour déplacer un objet (stylo ou flèche) dans un cours 21757 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.
oxymore

oxymore
***

Messages : 141
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

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

Message par lilas Mer 21 Déc 2016 - 20:13

cheers Merci

santa
lilas

lilas
*****

Féminin
Messages : 973
Inscrit(e) le : 07/08/2004

http://lesmusessamusent.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

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

Message par cedric03 Jeu 22 Déc 2016 - 23:30

merci oxymore

Yes Yes victoire Yes Yes ça marche

merci
cedric03

cedric03
Nouveau membre

Messages : 19
Inscrit(e) le : 20/12/2016

http://planetegraphisme.creationforum.net
cedric03 a été remercié(e) par l'auteur de ce sujet.

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

Message par lilas Ven 23 Déc 2016 - 5:32

cheers 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... scratch
et le fond personnalisé pour les messages ne s'étend pas comme il le devrait près de la bordure...

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

Un remède à suggérer ?

Gloups

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

lilas
*****

Féminin
Messages : 973
Inscrit(e) le : 07/08/2004

http://lesmusessamusent.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

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

Message par Shawn ModdingGaming Ven 23 Déc 2016 - 8:50

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

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

Cdt.
Shawn ModdingGaming

Shawn ModdingGaming
***

Masculin
Messages : 184
Inscrit(e) le : 04/11/2016

https://www.simulgamesmag.com
Shawn ModdingGaming a été remercié(e) par l'auteur de ce sujet.

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

Message par cedric03 Ven 23 Déc 2016 - 13:03

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
cedric03

cedric03
Nouveau membre

Messages : 19
Inscrit(e) le : 20/12/2016

http://planetegraphisme.creationforum.net
cedric03 a été remercié(e) par l'auteur de ce sujet.

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

Message par Shawn ModdingGaming Ven 23 Déc 2016 - 14:55

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 ...
Shawn ModdingGaming

Shawn ModdingGaming
***

Masculin
Messages : 184
Inscrit(e) le : 04/11/2016

https://www.simulgamesmag.com
Shawn ModdingGaming a été remercié(e) par l'auteur de ce sujet.

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

Message par cedric03 Ven 23 Déc 2016 - 16:34

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
cedric03

cedric03
Nouveau membre

Messages : 19
Inscrit(e) le : 20/12/2016

http://planetegraphisme.creationforum.net
cedric03 a été remercié(e) par l'auteur de ce sujet.

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

Message par lilas Ven 23 Déc 2016 - 18:22

Shawn ModdingGaming a écrit:Ou le mieux installez aussi Chrome sur votre ordi: Navigateur Chrome, cela vous ferais gagner du temps !!! Wink
Je n'impose pas de navigateurs à mes membres... Rolling Eyes 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... What's happen ?!?
Belle fin de journée forum

Lunette

lilas

lilas
*****

Féminin
Messages : 973
Inscrit(e) le : 07/08/2004

http://lesmusessamusent.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par oxymore Mar 27 Déc 2016 - 13:35

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();
 
});
oxymore

oxymore
***

Messages : 141
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

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

Message par cedric03 Mar 27 Déc 2016 - 14:22

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

cedric03

cedric03
Nouveau membre

Messages : 19
Inscrit(e) le : 20/12/2016

http://planetegraphisme.creationforum.net
cedric03 a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par oxymore Mar 27 Déc 2016 - 14:35

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 ,-)
oxymore

oxymore
***

Messages : 141
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

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

Message par cedric03 Mar 27 Déc 2016 - 14:44

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

cedric03
Nouveau membre

Messages : 19
Inscrit(e) le : 20/12/2016

http://planetegraphisme.creationforum.net
cedric03 a été remercié(e) par l'auteur de ce sujet.

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

Message par Chacha Lun 2 Jan 2017 - 10:26

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

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 »
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69276
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum