मैं अपनी क्षमताओं का विस्तार करने के लिए jQuery सीखने की कोशिश कर रहा हूं, इसलिए मैंने jQuery UI ".draggable ()" व्यवहार का अनुकरण करने का प्रयास किया। स्पिनेट सीधे समस्या दिखाता है, मुझे समझ में नहीं आता कि जब मैं #Box पर क्लिक करता हूं तो .mousedown ईवेंट ट्रिगर क्यों हो रहा है, मैं इसे केवल #MyBox पर क्लिक करने पर कैसे ट्रिगर कर सकता हूं?

पी.एस. यह पूरी तरह से jQuery को समझने के उद्देश्य से है, मेरा कहीं भी इस कोड का उपयोग करने का कोई इरादा नहीं है।

var down, x, y

$(document).ready(function(){
  $("#Box").draggable()
  $("#MyBox").mousedown(function(event){
    down = true
    var pos = $(this).offset();
    x = event.pageX - pos.left;
    y = event.pageY - pos.top;
  });
  $(document).mouseup(function(event){
    down = false
  })
  $(document).mousemove(function(event){
    $("span").text("X: " + event.pageX + " Y: " + event.pageY);
    if(down) 
    {
      $("#MyBox").offset({left:event.pageX-x, top:event.pageY-y})
    }
  })
});
* {
  background-color: white;
}

#MyBox {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
}

#Box {
  left: 250px;
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
  
  
<div class='test'>
  <span>Drag a box</span>
  <div id='MyBox'/>
  <div id='Box'/>
</div>
2
zvk 30 मार्च 2020, 01:22

1 उत्तर

सबसे बढ़िया उत्तर

आपने डिव बॉक्स को ठीक से बंद नहीं किया। आपका ब्राउज़र आपके लिए काम कर रहा है और निम्नलिखित तरीके से आपके कोड की व्याख्या कर रहा है:

<div class='test'>
  <span>Drag a box</span>
  <div id='MyBox'>
    <div id='Box'></div>
  </div>
</div>

ध्यान दें कि Box, MyBox के अंदर है। सरल तरीके से, Box MyBox का हिस्सा है: यदि आप Box में क्लिक करते हैं तो आप MyBox में भी क्लिक कर रहे हैं।

हालांकि समस्या को आसानी से हल किया जा सकता है: div टैग को </div> के साथ बंद किया जाना चाहिए क्योंकि सेल्फ क्लोजिंग टैग्स की सूची सीमित है:

<div class='test'>
  <span>Drag a box</span>
  <div id='MyBox'></div>
  <div id='Box'></div>
</div>

घटना को मूल तत्वों में प्रचारित करने से रोकने के तरीके हैं, लेकिन आपके मामले में आपके पास अपने HTML कोड में ऊपर प्रस्तुत समस्या है।

1
saulotoledo 29 मार्च 2020, 23:11