當我將一個類分成兩個類時，我的javascript會中斷

我目前正在製作一個拖放式JavaScript引擎。我想創建一個類（.drag），這個元素必須是「可拖拽」的。目前我的.drag類在CSS中有一些額外的東西，我想分成兩個類。但是，當我拆分課程時，我想拖動的對象不再是「可拖動的」。當我將一個類分成兩個類時，我的javascript會中斷

目前：

.drag { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: red; 
    cursor:move; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
}

我想有兩類：

<p class="drag">Thing One</p> 
<p class="drag">Thing Two</p>

要：從

.drag { 
    position: absolute; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
} 

.square { 
    width: 100px; 
    height: 100px; 
    background: red; 
    cursor:move; 
}

HTML變化

<p class="drag square">Thing One</p> 
<p class="drag square">Thing Two</p>

這裏是JavaScript：

// JavaScript Document 

var posX; 
var posY; 
var element; 
var currentPos; 

document.addEventListener("mousedown", drag, false); 

function drag(event) { 
    if(event.target.className == "drag") { 
     element = event.target; 
     element.style.zIndex="100"; 
     currentPos = findPos(element); 
     posX = event.clientX -currentPos.x; //-parseInt(element.offsetLeft); 
     posY = event.clientY -currentPos.y; //-parseInt(element.offsetTop); 
     document.addEventListener("mousemove", move, false); 
    } 
} 

function move(event) { 

    if (typeof(element.mouseup) == "undefined") 
     document.addEventListener("mouseup", drop, false); 
    //Prevents redundantly adding the same event handler repeatedly 

    element.style.left = event.clientX - posX + "px"; 
    element.style.top = event.clientY - posY + "px"; 
} 

function drop() { 
    element.style.zIndex="1"; 
    document.removeEventListener("mousemove", move, false); 
    document.removeEventListener("mouseup", drop, false); 
    //alert("DEBUG_DROP"); 
}  

function findPos(obj) { // Donated by `lwburk` on StackOverflow 
    var curleft = curtop = 0; 
    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 
     return { x: curleft, y: curtop }; 
    } 
}

爲什麼不會在拖動的元素，當我將學生？我如何解決它？

非常感謝您的閱讀和幫助！我非常感謝。

來源

2011-02-25 Dbz

*想知道爲什麼你想重新發明這個輪子*。 [jQueryUI]（http://jqueryui.com/demos/draggable/） – 2011-02-25 22:19:48

這是我第三天使用Javascript。我想在開始使用庫快捷方式之前學習該語言！ – Dbz 2011-02-25 22:25:17

夠公平的。當我第一次深入研究JavaScript時，我也寫了與你在這裏工作完全相同的功能。：] – 2011-02-25 22:27:06

您的條件有event.target.className == "drag"但這不再是如此現在== "drag square"。你想要的是一樣的東西：

event.target.className.search(/\bdrag\b/) > -1

爲您的條件。

來源

2011-02-25 22:20:17 mVChr

這很有道理，謝謝。我可以做（使用按位運算符）if（〜event.target.className.search（/ drag /））在JavaScript中嗎？ – Dbz 2011-02-25 22:21:35

我剛剛測試過，我可以！ =] – Dbz 2011-02-25 22:24:23

該速記應該可以正常工作，但可讀性較差並且只保存幾個字符。 – mVChr 2011-02-25 22:26:18

我懷疑行if(event.target.className == "drag") {現在將拉回「拖動正方形」 - 你應該在空間上拆分className並檢查是否有任何類是「拖動」。

來源

2011-02-25 22:21:04

在你拖拽功能，你說：

event.target.className == "drag"

可能的問題是，一旦你有該元素的多個類的類名不再等於「拖後腿」，但現在的班級超「拖方」。您可以嘗試在className上進行搜索，以查找其中一個類是「拖動」而不是僅拖動。

來源

2011-02-25 22:21:56 dough

當我將一個類分成兩個類時，我的javascript會中斷

回答

相關問題