Dynamiquement changer css backgroundPosition gauche ET top via Jquery

Question

Je suis un nouveau programmeur et l'anglais n'est pas ma langue maternelle alors s'il vous plaît pardonnez-moi d'avance pour la programmation et les erreurs en anglais.

Voici ce que je veux faire: J'ai une balise div qui contient une image et une table (en dehors de cette balise div). Via jquery j'essaie d'archiver un 'effet de recadrage' donc je fais glisser ma table et en faisant glisser je copie l'image et la place en arrière-plan sur ma table. Maintenant, je devrais être en mesure de définir dynamiquement la position d'arrière-plan de l'image dans la table de sorte que lorsque vous faites glisser l'image semble être immobile. L'effet de recadrage est archivé en modifiant (abaissant) l'opacité de l'image originale. Notez que je n'ai pas besoin de créer une sellection ou quelque chose de similaire. La table est créée en premier avec une taille donnée. Après cela, la table est déplacée sur l'image créant l'effet de recadrage.

Voici mon problème: lorsque je définis la position de l'image de fond via jquery (.css), elle ne change pas la position du haut et la position de gauche ne fonctionne pas comme prévu.

Voyons voir le code javascript:

<script type="text/javascript"> 

$(function() { 
    $("#myTable").draggable({ 
     drag:function() { 
      //$("#myTable").css("opacity", "0.6"); 
      var $img = $("img").clone(); 
      var $src = $img.attr('src'); 
      $("#myTable").css("background-image", 'url(' + $src + ')'); 
      $position = $("#myTable").position(); 

      $("#myTable").css({ 
       backgroundPosition: -parseInt($position.left) + -parseInt($position.top)}); 
     }, 
     stop:function() { 
      //$("#myTable").css("opacity", "1.0"); 
      $("#div1").css("opacity", "0.6"); 
     } 
    }); 
}); 

</script> 

La position de l'arrière-plan est pas correctement réglée maintenant, mais il n'a pas d'importance trop pour le moment. J'espère juste qu'il y a un moyen de changer dynamiquement la première position et je vais m'inquiéter des maths plus tard. J'espère aussi que c'est assez clair. Cordialement,

Irene

Answer 1

La propriété background-position CSS peut prendre deux arguments, séparés par un espace:

$("#myTable").css("backgroundPosition", (-parseInt($position.left)).toString() 
    + "px " + (-parseInt($position.top)).toString() + "px"); 

Answer 2

backgroundPosition: -parseInt($position.left)+'px ' + -parseInt($position.top) + 'px'}); 

essayer de spécifier une unité de mesure