js拖動img問題
調用后台返回DataTable方法,
然后create創建img,
img應該都是可以拖動的,
現在只能拖動最后創建的img,
拖動其他img,最后那個img就覆蓋率當前選中的img
打比方我創建了2個img,一個A,一個B,B是最后創建的那個img
現在我要拖動A,但我按下鼠標后,B就會覆蓋了A,實際拖動的還是A
然后create創建img,
img應該都是可以拖動的,
現在只能拖動最后創建的img,
拖動其他img,最后那個img就覆蓋率當前選中的img
function $(ele) {
if (typeof (ele) == 'string') {
return document.getElementById(ele)
}
}
var ObjImg = function() {
this.moveFlag = false;
this.showFlag = true;
this.mouseX = 0;
this.mouseY = 0;
this.X = 0;
this.Y = 0;
this.mapData = null;
}
ObjImg.prototype = {
isIE: function(e) {
if (!e) {
e = window.event;
}
return e;
},
init: function() {
mapData = Default3.GetData().value;
X = $("MapImg").offsetLeft;
Y = $("MapImg").offsetTop;
},
create: function() {
//mapData為后台數據
for (var i = 0; i < mapData.Rows.length; i++) {
var base = this;
var img = document.createElement("img");
img.id = mapData.Rows[i].ID;
img.src = "Common/Images/marker.png";
img.title = mapData.Rows[i].Name;
img.style.position = "absolute";
img.style.top = mapData.Rows[i].MapX + "px";
img.style.left = mapData.Rows[i].MapY + "px";
img.onmousedown = function() {
img.setCapture();
base.moveFlag = true;
};
img.onmousemove = function() {
if (base.moveFlag) {
$("show").style.display = 'none';
img.style.left = base.isIE(event).clientX - 10 + "px";
img.style.top = base.isIE(event).clientY - 10 + "px";
}
else {
base.createTootip(1);
}
};
img.onmouseup = function() {
base.moveFlag = false;
img.releaseCapture();
base.createTootip(); //釋放后重置位置
};
$("Map").appendChild(img);
}
},
createTootip: function(obj) {
if ($("show") == null) {
var div = document.createElement("div");
div.id = "ShowBox"
var path = "http://" + document.location.host + "/" + document.location.pathname.split('/')[1] + "/Common/Images/";
var msg = "<div id=\"show\" onmouseover=\"this.style.display = 'block'\" onmouseout=\"this.style.display = 'none'\">";
msg += "<span id=\"hintdivdown\" >";
msg += " <div style=\"visibility: visible; width: 300px; z-index: 501; background-color: #F2EFE8;\">";
msg += " <p><img src=" + path + "commandbg3.gif width=\"300px\" height=\"20px\"/></p>";
msg += " <div class=\"messagetext\">";
msg += " <span id=\"text\" height=\"15px\"></span>";
msg += " <table class=\"editFormTable\">";
msg += " <tr>";
msg += " <td>企業名稱:</td>";
msg += " <td><input type=\"text\" id=\"\" style=\"width:200px;\" /></td>";
msg += " </tr>";
msg += " <tr>";
msg += " <td>辦公電話:</td>";
msg += " <td><input type=\"text\" id=\"\" /></td>";
msg += " </tr>";
msg += " <tr>";
msg += " <td>移動電話:</td>";
msg += " <td><input type=\"text\" id=\"\" /> </td>";
msg += " </tr>";
msg += " <tr>";
msg += " <td>企業名稱:</td>";
msg += " <td><input type=\"text\" id=\"\" style=\"width:200px;\" /></td>";
msg += " </tr>";
msg += " <tr>";
msg += " <td>企業坐標:</td>";
msg += " <td>X:<input type=\"text\" id=\"txtX\" style=\"width:60px;\" /> Y:<input type=\"text\" id=\"txtY\" style=\"width:60px;\" /></td>";
msg += " </tr>";
msg += " <tr>";
msg += " <td></td>";
msg += " <td><input id=\"btnSave\" type=\"button\" value=\"保 存\" /> <input id=\"btnClose\" type=\"button\" value=\"關 閉\" onclick=\"document.getElementById('show').style.display='none';\" /></td>";
msg += " </tr>";
msg += " </table>";
msg += " </div>";
msg += " <p>";
msg += " <img src=" + path + "commandbg4.gif width=\"300px\" /></p>";
msg += " </div>";
msg += "</span>";
msg += "</div>";
div.innerHTML = "";
div.innerHTML = msg;
document.body.appendChild(div);
this.showFlag = false;
}
document.getElementById("show").style.display = 'block';
document.getElementById("show").style.position = "absolute";
document.getElementById("show").style.top = this.isIE(event).clientY + 30 + "px";
document.getElementById("show").style.left = this.isIE(event).clientX - 40 + "px"
$("txtX").value = this.isIE(event).clientX;
$("txtY").value = this.isIE(event).clientY;
}
}
var map = new ObjImg();
window.onload = function() {
map.init();
}
3 个解决方案
#1
沒看明白你說的啥問題
#2
打比方我創建了2個img,一個A,一個B,B是最后創建的那個img
現在我要拖動A,但我按下鼠標后,B就會覆蓋了A,實際拖動的還是A
#3
不會 關注。。。
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。