सरल ड्रैग और ड्रॉप कोड

मैं एक साधारण जावास्क्रिप्ट अभ्यास के साथ संघर्ष कर रहा हूं, एक वेनिला ड्रैग और ड्रॉप लिख रहा हूं।सरल ड्रैग और ड्रॉप कोड

var ele = document.getElementsByClassName ("target")[0]; 
var stateMouseDown = false; 
//ele.onmousedown = eleMouseDown; 
ele.addEventListener ("onmousedown" , eleMouseDown , false); 

function eleMouseDown() { 
    stateMouseDown = true; 
    document.addEventListener ("onmousemove" , eleMouseMove , false); 
} 

function eleMouseMove (ev) { 
    do { 
     var pX = ev.pageX; 
     var pY = ev.pageY; 
     ele.style.left = pX + "px"; 
     ele.style.top = pY + "px"; 
     document.addEventListener ("onmouseup" , eleMouseUp , false); 
    } while (stateMouseDown === true); 
} 

function eleMouseUp() { 
    stateMouseDown = false; 
    document.removeEventListener ("onmousemove" , eleMouseMove , false); 
    document.removeEventListener ("onmouseup" , eleMouseUp , false); 
}

स्रोत

2013-08-25 Kayote

यहाँ काम कर इसके साथ एक jsfiddle है:: http://jsfiddle.net/fpb7j/1/

2 मुख्य मुद्दों थे, पहले onmousedown के उपयोग किया जा रहा है, onmousemove मुझे लगता है कि मैं अपने 'addeventlisteners' के साथ एक गलती कर, यहाँ कोड है और onmouseup। मेरा मानना है कि उन लोगों के ही कर रहे हैं संलग्न की घटनाओं के साथ इस्तेमाल किया जा रहा:

document.body.attachEvent('onmousemove',drag);

जबकि mousedown, mousemove और mouseup घटना श्रोताओं के लिए कर रहे हैं:

document.body.addEventListener('mousemove',drag);

दूसरे अंक चाल स्पर्धा में पाश do-, जबकि था समारोह। यही कारण है कि समारोह के हर बार माउस एक पिक्सेल ले जाता है बुलाया जा रहा है, तो पाश की जरूरत नहीं है:

var ele = document.getElementsByClassName ("target")[0]; 
ele.addEventListener ("mousedown" , eleMouseDown , false); 

function eleMouseDown() { 
    stateMouseDown = true; 
    document.addEventListener ("mousemove" , eleMouseMove , false); 
} 

function eleMouseMove (ev) { 
    var pX = ev.pageX; 
    var pY = ev.pageY; 
    ele.style.left = pX + "px"; 
    ele.style.top = pY + "px"; 
    document.addEventListener ("mouseup" , eleMouseUp , false); 
} 

function eleMouseUp() { 
    document.removeEventListener ("mousemove" , eleMouseMove , false); 
    document.removeEventListener ("mouseup" , eleMouseUp , false); 
}

वैसे, मैं लक्ष्य की स्थिति यह काम करने के लिए पूर्ण करना था।

स्रोत

2013-08-25 02:58:13 iRector

के लिए धन्यवाद विस्तृत उत्तर मैं mousemove के लिए Do while का उपयोग कर रहा था, जबकि mousedown सक्रिय है, अन्यथा यह नहीं चलना चाहिए ... अगर मैं Do जबकि लूप सक्षम करता हूं, तो फ़ायरफ़ॉक्स हालांकि रुकावट में आता है। – Kayote

@ कायोट I gotcha, हालांकि यह आवश्यक नहीं होगा कि 'mousemove' ईवेंट कितनी बार 'eleMouseMove() ' – iRector

पर कॉल करता है, मैंने इसे अपनी आवश्यकता के लिए थोड़ा अपडेट किया। यह दूसरों के लिए भी उपयोगी हो सकता है, इस प्रकार http://jsfiddle.net/kjwLe9bq/ साझा करना। – Savaratkar

आप इस बेला भी कोशिश कर सकते हैं, http://jsfiddle.net/dennisbot/4AH5Z/

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>titulo de mi pagina</title> 
<style> 
    #target { 
     width: 100px; 
     height: 100px; 
     background-color: #ffc; 
     border: 2px solid blue; 
     position: absolute; 
    } 
</style> 
<script> 
    window.onload = function() { 
     var el = document.getElementById('target'); 
     var mover = false, x, y, posx, posy, first = true; 
     el.onmousedown = function() { 
      mover = true; 
     }; 
     el.onmouseup = function() { 
      mover = false; 
      first = true; 
     }; 
     el.onmousemove = function(e) { 
      if (mover) { 
       if (first) { 
        x = e.offsetX; 
        y = e.offsetY; 
        first = false; 
       } 
       posx = e.pageX - x; 
       posy = e.pageY - y; 
       this.style.left = posx + 'px'; 
       this.style.top = posy + 'px'; 
      } 
     }; 
    } 
</script> 
</head> 
<body> 
    <div id="target" style="left: 10px; top:20px"></div> 
</body> 
</html>

स्रोत

2014-02-11 06:30:29 dennisbot

आप ऑफसेटएक्स/वाई का उपयोग क्यों करते हैं? –

माउस पॉइंटर पर ड्रैगगेबल कूदने को रोकने के लिए। मैं समझ गया। –

मैं सिर्फ एक सरल खींचें कर दिया है।

यह एक एक लाइनर उपयोग है, और यह बातें तत्व, onDrag/onStop कॉलबैक के ऊपरी बाएं कोने करने के लिए माउस का ऑफसेट, और SVG तत्वों

खींचकर यहाँ कोड है की तरह संभालती है।

// simple drag 
function sdrag(onDrag, onStop) { 
    var startX = 0; 
    var startY = 0; 
    var el = this; 
    var dragging = false; 

    function move(e) { 
     el.style.left = (e.pageX - startX) + 'px'; 
     el.style.top = (e.pageY - startY) + 'px'; 
     onDrag && onDrag(el, e.pageX, startX, e.pageY, startY); 
    } 

    function startDragging(e) { 
     if (e.currentTarget instanceof HTMLElement || e.currentTarget instanceof SVGElement) { 
      dragging = true; 
      var left = el.style.left ? parseInt(el.style.left) : 0; 
      var top = el.style.top ? parseInt(el.style.top) : 0; 
      startX = e.pageX - left; 
      startY = e.pageY - top; 
      window.addEventListener('mousemove', move); 
     } 
     else { 
      throw new Error("Your target must be an html element"); 
     } 
    } 

    this.addEventListener('mousedown', startDragging); 
    window.addEventListener('mouseup', function (e) { 
     if (true === dragging) { 
      dragging = false; 
      window.removeEventListener('mousemove', move); 
      onStop && onStop(el, e.pageX, startX, e.pageY, startY); 
     } 
    }); 
} 

Element.prototype.sdrag = sdrag;

और इसका इस्तेमाल करने के लिए:

document.getElementById('my_target').sdrag();

तुम भी onDrag और onStop कॉलबैक का उपयोग कर सकते हैं:

document.getElementById('my_target').sdrag(onDrag, onStop);

अधिक जानकारी के लिए यहाँ मेरी रेपो की जाँच करें: https://github.com/lingtalfi/simpledrag

स्रोत

2016-09-02 19:12:34 ling

सरल ड्रैग और ड्रॉप कोड

उत्तर

संबंधित मुद्दे