js拖動img問題


調用后台返回DataTable方法,
然后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;\" /> &nbsp;&nbsp; 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=\"保 存\" />&nbsp;&nbsp;<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


引用 1 樓 xzoth 的回復:
沒看明白你說的啥問題

打比方我創建了2個img,一個A,一個B,B是最后創建的那個img
現在我要拖動A,但我按下鼠標后,B就會覆蓋了A,實際拖動的還是A

#3


 不會 關注。。。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com