[JS] przesuwanie obrazków - przekreślone kółko

[look997]

Jak chce się przeciągnąć myszą z wciśniętym przyciskiem myszy (mausedown) to pojawia się przekreślone kółko. jak wyłączyć to kółka tak aby się nie pojawiało i nie przeszkadzało w wykonaniu skryptu drag and drop?

[look997]

Przecież takie coś musi być zrobione przy każdym skrypcie dragndrop, na pewno ktoś to wie.

[Tomek]

Może i ktoś wie, ale nikomu nie chce się sprawdzać każdego skryptu... podaj adres lub kod (z naciskiem na to 1)

[look997]

Może i ktoś wie, ale nikomu nie chce się sprawdzać każdego skryptu... podaj adres lub kod (z naciskiem na to 1)

Niestety adresu brak (jedynie lokalny )
Skrypt:

Kod: Zaznacz cały

// załadownie treści
function zaladowanie(){
   
   //zabezpieczenie przd wielokrotnym wykonaniem funkcji
   if (arguments.callee.done) { return; }
   arguments.callee.done = true;
   
   // sprawdzenie pozycji kursora myszy
   function pozycjaMyszy(event){
      var pokaz = document.getElementById("pokaz");
      var pozycjaX = event.clientX - mapa.offsetLeft - mapa.getElementsByTagName("img")[0].offsetLeft + window.pageXOffset + mapa.scrollLeft;
      var pozycjaY = event.clientY - mapa.offsetTop - mapa.getElementsByTagName("img")[0].offsetTop  + window.pageYOffset + mapa.scrollTop;
      //mapa.scrollTop = 0;
      pokaz.innerHTML = "  X: "+ pozycjaX +" Y: "+ pozycjaY;
   }
   var mapa = document.getElementById("mapa");

   mapa.addEventListener('click',pozycjaMyszy, true);
   
   
   // przesuwanie - przyciski
   // szerokość obrazka
   function szerIMG(src) {
      var imageObject = new Image();
      imageObject.src = src;
      var szer = imageObject.width;
      return szer;
   }
   // wysokość obrazka
   function wysIMG(src) {
      var imageObject = new Image();
      imageObject.src = src;
      var wys = imageObject.height;
      return wys;
   }
   
   //  wycina samą liczbę (bez "px")
   function samaLiczba(WidPx){
      WidPxDl = WidPx.length - 2;
      Wid = WidPx.substring(0,WidPxDl);
      return Wid;
   }
   
   // współrzędne lewego górnego roga mapy w widoku
   mapX = 0;
   mapY = 0;
   
   // obrazek mapy
   mapaIMG = mapa.getElementsByTagName("img")[0].src;
   
   // szerokość obrazka
   szerMap = szerIMG(mapaIMG);
   // szerokość widoku
   szerWid = samaLiczba(mapa.style.width);
   // wysokość obrazka
   wysMap = wysIMG(mapaIMG);
   // wysokość widoku
   wysWid = samaLiczba(mapa.style.height);
   
   maxX = szerMap - szerWid;
   maxY = wysMap - wysWid;
   stylMapy = mapa.getElementsByTagName("img")[0].style;
   
   // centrum mapy
   mapX = (szerMap/2)-(szerWid/2);
   mapY = (wysMap/2)-(wysWid/2);
   stylMapy.left="-"+mapX+"px";
   stylMapy.top="-"+mapY+"px";
   
   function fdol(event){
      event.target.addEventListener('mouseup',fdolStop, true);
      event.target.addEventListener('mouseout',fdolStop, true);
      
      lol = 1;

      function fSuwW(){
            
      if(lol == 1){
      setTimeout(function(){
         if(event.target.id == "prawo" && maxX>=mapX){
            mapX += 2;
            stylMapy.left="-"+mapX+"px";
         }if(event.target.id == "lewo" && 0<=mapX){
            mapX -= 2;
            stylMapy.left="-"+mapX+"px";
         }if(event.target.id == "dol" && maxY>=mapY){
            mapY += 2;
            stylMapy.top="-"+mapY+"px";
         }if(event.target.id == "gora" && 0<=mapY){
            mapY -= 2;
            stylMapy.top="-"+mapY+"px";
         }
            fSuwW();
         },1);   
         
      }
      }
      fSuwW();
   }
   
   function fdolStop(event){
      event.target.removeEventListener('mouseup',fdolStop, true);
      event.target.removeEventListener('mouseout',fdolStop, true);
      lol = 5;
   }
   
   var gora = document.getElementById("gora");
   var prawo = document.getElementById("prawo");
   var dol = document.getElementById("dol");
   var lewo = document.getElementById("lewo");
   
   gora.addEventListener('mousedown',fdol, true);
   prawo.addEventListener('mousedown',fdol, true);
   dol.addEventListener('mousedown',fdol, true);
   lewo.addEventListener('mousedown',fdol, true);
   
   // przesuwanie "rączką"
   function suwReka(event){
      if((-(mapX-event.clientX)) > (-(szerMap-szerWid))){
         stylMapy.left = "-"+(mapX-event.clientX)+"px";
      }
      if((-(mapY-event.clientY)) > (-(wysMap-wysWid))){
         stylMapy.top = "-"+(mapY-event.clientY)+"px";
         return false
      }
      
   }
   // wyłączenie przesuwania
   function WylSuwReka(event){
      mapa.getElementsByTagName("img")[0].removeEventListener('mousemove',suwReka, true);
      mapX = -(samaLiczba(stylMapy.left));
      mapY = -(samaLiczba(stylMapy.top));
   }
   function suwRekaDown(event){
      mapa.getElementsByTagName("img")[0].addEventListener('mouseup',WylSuwReka, true);
      //alert(((mapX/2)-event.clientX-mapa.offsetLeft));
      mapX = mapX+event.clientX;
      mapY = mapY+event.clientY;
      mapa.getElementsByTagName("img")[0].addEventListener('mousemove',suwReka, true);
   }
   
   mapa.getElementsByTagName("img")[0].addEventListener('mausedown',suwRekaDown, true);
   
} // koniec tresci


// warunek - istnienie treści
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", zaladowanie, false);
}

body (w miejsce obrazka można wstawić dowolny inny):

Kod: Zaznacz cały

p>

Pozycja: <span onselect="return false" id="pokaz"></span><br>
<map id="mapy_wsp" name="mapy_wsp" style=" position: absolute; z-index: 9;">
  <area shape="rect" coords="0,0,82,126" alt="Sun" />
</map>
<div id="mapa" style="position: relative; width: 800px; height: 800px; overflow: hidden; z-index: 0">
<img src="mapa/cala.PNG" alt="cala_mapa" usemap="#mapy_wsp" style="cursor:move; position: absolute; z-index: 10;">
<div id="gora" style="position: absolute; top:10px; left: 150px; z-index: 11; background: blue; color: white;">Góra</div><div id="lewo" style="position: absolute; top:150px; left: 10px; z-index: 11; background: blue; color: white;">Lewo</div><div id="prawo" style="position: absolute; top:150px; left: 260px; z-index: 11; background: blue; color: white;">Prawo</div><div id="dol" style="position: absolute; top:280px; left: 150px; z-index: 11; background: blue; color: white;">Dół</div>
</div>
</p>

[look997]

To była tylko literówka, zamiast mousedown mausedown wpisałem i ondragstart="return false" pomogło.