शुद्ध जावास्क्रिप्ट

का उपयोग कर स्क्रीन के चारों ओर आसानी से छवि को खींचें मैं जावास्क्रिप्ट का उपयोग स्क्रीन के चारों ओर एक छवि खींचने का प्रयास कर रहा हूं। मैंने पहले से ही एक स्क्रिप्ट लिखी है जो पाठ के साथ divs पर ठीक काम करता है, लेकिन जब मैं इसे किसी छवि पर उपयोग करता हूं तो यह बहुत ही अंतःक्रियात्मक रूप से काम करता है।शुद्ध जावास्क्रिप्ट

मैंने अपना कोड jsfiddle पर रखा है ताकि अन्य लोग देख सकें कि मेरा क्या मतलब है। http://jsfiddle.net/laurence/YNMEX/

यदि आप इसे चलाते हैं तो आप पाएंगे कि टेक्स्ट ब्लॉक को खींचा जा सकता है और गिरा दिया जा सकता है, लेकिन जब आप छवि के साथ एक ही चीज़ को आजमाते हैं, तो यह छवि को पीछे छोड़ देता है। ऐसा लगता है कि छवि माउस के आंदोलन के साथ नहीं रह सकती है।

मैं नीचे jsfiddle पर कोड दोहराया है

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Drag and drop</title> 
<style type="text/css"> 

    .dragme { 
     position:relative; 
     width: 270px; 
     height: 203px; 
     cursor: move; 
    } 
    #draggable { 
     background-color: #ccc; 
     border: 1px solid #000; 
    } 
</style> 
<script type="text/javascript"> 
     function startDrag(e) { 
      // determine event object 
      if (!e) { 
       var e = window.event; 
      } 

      // IE uses srcElement, others use target 
      var targ = e.target ? e.target : e.srcElement; 

      if (targ.className != 'dragme') {return}; 
      // calculate event X, Y coordinates 
       offsetX = e.clientX; 
       offsetY = e.clientY; 

      // assign default values for top and left properties 
      if(!targ.style.left) { targ.style.left='0px'}; 
      if (!targ.style.top) { targ.style.top='0px'}; 

      // calculate integer values for top and left 
      // properties 
      coordX = parseInt(targ.style.left); 
      coordY = parseInt(targ.style.top); 
      drag = true; 

      // move div element 
       document.onmousemove=dragDiv; 

     } 
     function dragDiv(e) { 
      if (!drag) {return}; 
      if (!e) { var e= window.event}; 
      var targ=e.target?e.target:e.srcElement; 
      // move div element 
      targ.style.left=coordX+e.clientX-offsetX+'px'; 
      targ.style.top=coordY+e.clientY-offsetY+'px'; 
      return false; 
     } 
     function stopDrag() { 
      drag=false; 
     } 
     window.onload = function() { 
      document.onmousedown = startDrag; 
      document.onmouseup = stopDrag; 
     } 


</script> 

</head> 
<body> 
<div id="draggable" class="dragme">"Hello World!"</div> 
<img src="flower.jpg" alt="drag-and-drop image script" 
title="drag-and-drop image script" class="dragme">

स्रोत

2013-08-01 Laurence

+1 शुद्ध जावास्क्रिप्ट समाधान की कोशिश करने के लिए +1। अब हमें केवल "jquery" झुंड के लिए इंतजार करने की प्रतीक्षा करनी है :)। – Parrotmaster

आप jQuery का उपयोग क्यों नहीं करते? – Aerovistae

बस अपने startDrag समारोह के अंत में return false जोड़ने क्लिक करें घटना से निपटने से ब्राउज़र रखने के लिए।

स्रोत

2013-08-01 11:26:20 n3rd

अच्छा! बस इसे पहेली में आजमाया और यह बेकार ढंग से काम करता है। मैं इसे एक साधारण ब्राउज़र आधारित जावास्क्रिप्ट शतरंज गेम में बदलने की सोच रहा हूं :) – Parrotmaster

@Parrotmaster http://jsfiddle.net/YNMEX/1/ ('वापसी झूठी 'के अलावा' रोकथाम 'को भी नोटिस करें। – Alxandr

धन्यवाद आपकी मदद के लिए दर्मेश पटेल और एन 3 डी और मेरे प्रश्न का उत्तर देने में इतनी तत्परता के लिए। धन्यवाद। जेआरएफडल – Laurence

आप अपने startDrag समारोह के अंत में e.preventDefault(); जोड़ सकते हैं

स्रोत

2013-08-01 11:36:35

इसके अलावा targ (वर) के बिना केवल startDrag और global पर सौंपा जाना चाहिए:

http://jsfiddle.net/gigyme/YNMEX/132/

<script type="text/javascript"> 
    function startDrag(e) { 
      // determine event object 
      if (!e) { 
       var e = window.event; 
      } 
      if(e.preventDefault) e.preventDefault(); 

      // IE uses srcElement, others use target 
      targ = e.target ? e.target : e.srcElement; 

      if (targ.className != 'dragme') {return}; 
      // calculate event X, Y coordinates 
       offsetX = e.clientX; 
       offsetY = e.clientY; 

      // assign default values for top and left properties 
      if(!targ.style.left) { targ.style.left='0px'}; 
      if (!targ.style.top) { targ.style.top='0px'}; 

      // calculate integer values for top and left 
      // properties 
      coordX = parseInt(targ.style.left); 
      coordY = parseInt(targ.style.top); 
      drag = true; 

      // move div element 
       document.onmousemove=dragDiv; 
      return false; 

     } 
     function dragDiv(e) { 
      if (!drag) {return}; 
      if (!e) { var e= window.event}; 
      // var targ=e.target?e.target:e.srcElement; 
      // move div element 
      targ.style.left=coordX+e.clientX-offsetX+'px'; 
      targ.style.top=coordY+e.clientY-offsetY+'px'; 
      return false; 
     } 
     function stopDrag() { 
      drag=false; 
     } 
     window.onload = function() { 
      document.onmousedown = startDrag; 
      document.onmouseup = stopDrag; 
     } 
</script>

स्रोत

2014-07-01 13:27:47 Gigy

पर मेरी लिपि के सही संस्करण को रखने के लिए तोतामास्टर धन्यवाद। यह स्पर्श स्क्रीन उपकरणों (टैबलेट और स्मार्टफ़ोन) के लिए स्पर्श ईवेंट को सक्षम करने के लिए कैसे काम करता है। इस स्क्रिप्ट के लिए? – CodeMonk

बाइंड एक विशिष्ट खींचें घटना के तत्व।

function log() { 
    var debug = true; 
    if (!debug) 
     return; 
    if (arguments) { 
     for (var i = 0; i < arguments.length; i++) { 
      console.log(arguments[i]); 
     } 
    } 
}  

function Drag(element) { 
    this.dragging = false; 
    this.mouseDownPositionX = 0; 
    this.mouseDownPositionY = 0; 
    this.elementOriginalLeft = 0; 
    this.elementOriginalTop = 0; 
    var ref = this; 
    this.startDrag = function (e) { 
     e.preventDefault(); 
     ref.dragging = true; 
     ref.mouseDownPositionX = e.clientX; 
     ref.mouseDownPositionY = e.clientY; 
     ref.elementOriginalLeft = parseInt(element.style.left); 
     ref.elementOriginalTop = parseInt(element.style.top); 
     // set mousemove event 
     window.addEventListener('mousemove', ref.dragElement); 
     log('startDrag'); 
    }; 
    this.unsetMouseMove = function() { 
     // unset mousemove event 
     window.removeEventListener('mousemove', ref.dragElement); 
    }; 
    this.stopDrag = function (e) { 
     e.preventDefault(); 
     ref.dragging = false; 
     ref.unsetMouseMove(); 
     log('stopDrag'); 
    }; 
    this.dragElement = function (e) { 
     log('dragging'); 
     if (!ref.dragging) 
      return; 
     e.preventDefault(); 
     // move element 
     element.style.left = ref.elementOriginalLeft + (e.clientX - ref.mouseDownPositionX) + 'px'; 
     element.style.top = ref.elementOriginalTop + (e.clientY - ref.mouseDownPositionY) + 'px'; 
     log('dragElement'); 
    }; 
    element.onmousedown = this.startDrag; 
    element.onmouseup = this.stopDrag; 
} 

var myDrag = new Drag(yourElement);// bind event 
console.log(myDrag.dragging);

स्रोत

2018-01-06 15:02:05 sambuca

शुद्ध जावास्क्रिप्ट

उत्तर

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