jQuery ड्रैग और ड्रॉप का उपयोग करने के बाद मैं समन्वय स्थिति कैसे प्राप्त करूं?

Question

jQuery ड्रैग और ड्रॉप का उपयोग करने के बाद मैं समन्वय स्थिति कैसे प्राप्त करूं? मैं समन्वय को डेटाबेस में सहेजना चाहता हूं, ताकि अगली बार जब मैं जाउंगा, तो आइटम उस स्थिति में होगा। उदाहरण के लिए, एक्स: 520 पीएक्स, वाई: 300 पीएक्स?

संपादित करें:

मैं PHP और MySQL प्रोग्रामर :)

वहाँ किसी भी ट्यूटोरियल वहाँ बाहर है हूँ?

Answer 1

मैं this जैसे कुछ के साथ शुरू करूंगा। फिर position plugin का उपयोग करने के लिए इसे अपडेट करें और यह आपको वह स्थान प्राप्त करना चाहिए जहां आप बनना चाहते हैं।

Answer 2

मैंने अभी ऐसा कुछ किया है (यदि मैं आपको सही ढंग से समझता हूं)।

मैं फ़ंक्शन स्थिति() को jQuery 1.3.2 में शामिल करता हूं।

बस एक कॉपी पेस्ट और एक त्वरित tweak किया ... लेकिन आपको विचार देना चाहिए।

// Make images draggable. 
$(".item").draggable({ 

    // Find original position of dragged image. 
    start: function(event, ui) { 

     // Show start dragged position of image. 
     var Startpos = $(this).position(); 
     $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top); 
    }, 

    // Find position where image is dropped. 
    stop: function(event, ui) { 

     // Show dropped position. 
     var Stoppos = $(this).position(); 
     $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
    } 
}); 

<div id="container"> 
    <img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /> 
    <img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /> 
    <img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /> 
</div> 

<div id="start">Waiting for dragging the image get started...</div> 
<div id="stop">Waiting image getting dropped...</div> 

Answer 3

आप dragstop या अन्य घटनाओं को सुन रहे हैं, तो मूल स्थिति एक ui पैरामीटर होना चाहिए:

dragstop: function(event, ui) { 
    var originalPosition = ui.originalPosition; 
} 

अन्यथा, मैं इसे पाने के लिए एक ही रास्ता का मानना ​​है:

draggable.data("draggable").originalPosition 

जहां ड्रैगगेबल वह वस्तु है जिसे आप खींच रहे हैं। दूसरा संस्करण jQuery के भविष्य के संस्करणों में काम करने की गारंटी नहीं है।

Answer 4

Cudos स्वीकृत उत्तर बहुत अच्छा है। हालांकि, ड्रैगगेबल मॉड्यूल में "ड्रैग" ईवेंट भी है जो आपको खींचने के दौरान स्थिति बताता है। तो, 'स्टार्ट' और 'स्टॉप' के अलावा आप अपने खींचने योग्य वस्तु के भीतर निम्नलिखित घटना जोड़ सकते हैं:

// Drag current position of dragged image. 
    drag: function(event, ui) { 

     // Show the current dragged position of image 
     var currentPos = $(this).position(); 
     $("div#xpos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top); 

    } 

Answer 5

यह मेरे लिए काम किया:

$("#element1").droppable(
{ 
    drop: function(event, ui) 
    { 
     var currentPos = ui.helper.position(); 
      alert("left="+parseInt(currentPos.left)+" top="+parseInt(currentPos.top)); 
    } 
}); 

Answer 6

एक ही समस्या थी। मेरा समाधान अगला है:

$("#element").droppable({ 
    drop: function(event, ui) { 

     // position of the draggable minus position of the droppable 
     // relative to the document 
     var $newPosX = ui.offset.left - $(this).offset().left; 
     var $newPosY = ui.offset.top - $(this).offset().top; 

    } 
}); 

Answer 7

मुझे प्रारंभ स्थिति और अंत स्थिति को सहेजने की आवश्यकता थी। मेरे लिए यह काम:

$('.object').draggable({ 
     stop: function(ev, ui){ 
      var position = ui.position; 
      var originalPosition = ui.originalPosition; 
     } 
    }); 

Answer 8

ऊपर मेरे लिए काम किया से कोई नहीं।

यहाँ मेरी समाधान-महान काम करता है:

$dropTarget.droppable({ 
    drop: function(event, ui) { 

    // Get mouse position relative to drop target: 
    var dropPositionX = event.pageX - $(this).offset().left; 
    var dropPositionY = event.pageY - $(this).offset().top; 
    // Get mouse offset relative to dragged item: 
    var dragItemOffsetX = event.offsetX; 
    var dragItemOffsetY = event.offsetY; 
    // Get position of dragged item relative to drop target: 
    var dragItemPositionX = dropPositionX-dragItemOffsetX; 
    var dragItemPositionY = dropPositionY-dragItemOffsetY; 

    alert('DROPPED IT AT ' + dragItemPositionX + ', ' + dragItemPositionY); 

(आधार आंशिक रूप से यहाँ दी समाधान बंद: https://stackoverflow.com/a/10429969/165673)

Answer 9

$(function() 
 
    { 
 
    $("#element").draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]}); 
 
    }); 
 
    $(document).ready(function() { 
 
     $("#element").draggable({ 
 
       containment: '#snaptarget', 
 
       scroll: false 
 
     }).mousemove(function(){ 
 
       var coord = $(this).position(); 
 
       var width = $(this).width(); 
 
       var height = $(this).height(); 
 
       $("p.position").text("(" + coord.left + "," + coord.top + ")"); 
 
       $("p.size").text("(" + width + "," + height + ")"); 
 
     }).mouseup(function(){ 
 
       var coord = $(this).position(); 
 
       var width = $(this).width(); 
 
       var height = $(this).height(); 
 
       $.post('/test/layout_view.php', {x: coord.left, y: coord.top, w: width, h: height}); 
 
       
 
       }); 
 
     });

#element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;} 
 
#snaptarget { height:610px; width:1000px;} 
 
.draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; } 
 
.wrapper 
 
{ 
 
background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent); 
 
height:100%; 
 
background-size:45px 45px; 
 
border: 1px solid black; 
 
background-color: #434343; 
 
margin: 20px 0px 0px 20px; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Layout</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <link rel="stylesheet" href="../themes/default/css/test4.css" type="text/css" charset="utf-8"/> 
 
    <script src="../themes/default/js/layout.js"></script> 
 
    </head> 
 
<body> 
 
    <div id="snaptarget" class="wrapper"> 
 
     <div id="element" class="draggable ui-widget-content"> 
 
      <p class="position"></p> 
 
      <p class="size"></p> 
 
     </div> 
 
    </div> 
 
    <div></div> 
 
</body> 
 
</html>