Uzman Cevap beta aşamasından çıkmaya hazırlanıyor! Yenilikleri takipte kalın.

Jquery Sürükle Bırak İşlemi

Merhabalar değerli hocalarım,

Üzerinde çalıştığım bir proje için çok fazla jquery kullanmam gerekiyor ve maalesef jquery'de o kadar iyi değilim. Çoğu sıkıntıyı halletsem de bir yerde takıldım kaldım.

<center>
<div id="cerceve">
      <div id="map"><img src="map.png"</div>
</div>

şeklinde 2 divim 1 resmim var. Resim bir çeşit harita, görüntüsü fark etmez.

#cerceve{width:1200px;height:750px;border:10px solid royalblue; position:fixed; overflow:hidden;}
#map img{width:5000px; height:5000px;}

Bu şekilde de css kodlarım var. pek bir sorun görünmüyor.


$(function(){
  $("#map").draggable({ snap : "#cerceve", snapMode : "inner" });
});


bu jquery komutlarım. İnternetten buldum. İstediğim işi sağlıyor aslında ama eksik... Şu şekilde, şuan #map 'ı #çerceve'nin içinde sürükleyebilmek istiyorum. Çalışıyorda, fakat ben örneğin aşağı doğru sürüklerken, resmin üst sınır, çerçevenin üst borderini geçince daha fazla aşağı çekemesin istiyorum. kendi kendine geri kayabilir, hiç gelmeyebilir uyarı çıkarabilir hiç önemli değil. sürükle işlemi 5000px geçince resim olmadığı için görünen beyaz arkaplanın görünmesini istemiyorum.

Şimdiden yardımcı olanlar için teşekkür ederim.
Cevaplar (2)
1
Böyle bir örnek hazırladım : https://jsfiddle.net/sovetski/c9vgvdmm/

Resim çerçevenin içinde haraket ediyor, resim bitincede duruyor :)
0
hocam çok teşekkür ederim su sistem tam istediğim gibi. bunu biraz inceleyerek sanırım bir çok sorunu halledebilirim çok teşekkür ederim.

peki şöyle birşey olsa, o resmi belirli aralıklardaki karelere bölsek, herbiri x-y olarak koordinat temsil etse yapabilir miyiz? atıyorum

tablo koy
id | x_position | y_position

burdan çektiğim verilere göre o resmin üstünde koordinatlarında veri oluşturma. koy.png nin o koodinatı temsil eden karenin içinde olması.

karelere id atayarak yapabilirim diye düşünüyorum.

<ul>
<li class="karex" id="x1-y1"></li>
<li class="karex" id="x1-y2"></li>
<li class="karex" id="x1-y3"></li>
</ul>
<ul>
<li class="karey" id="x1-y1"></li>
<li class="kare" id="x2-y1"></li>
<li class="kare" id="x2-y1"></li>
</ul>

biraz saçma görünüyor ama aklıma gelen tek yöntem bu.

bildiğiniz başka bir yöntem var mı? travian games deki map sisteminden oluşturmaya çalışıyorum
Cevap Yazın..

[code=css,php,sql,asp..]..kod..[/code] , [url=http:...com] , [img=resim linki]
[color=renk kodu]..yazı..[/color]

yabancı dizi izle tv ünitesi