jQuery UI - गिराए गए ड्रैगगेबल

Question

को पुनर्स्थापित कैसे करें मेरे पास 3 डिव्स हैं जिन्हें मैं ट्रैश कैन की छवि में खींच सकता हूं। एक बार जब उपयोगकर्ता माउस डिव अन्यथा गिरा दिया जाता है कि वह अपने मूल स्थान पर वापस परिवर्तित की गई विज्ञप्ति, यहाँ मेरी कोड है:

<div id="draggables"> 
    <div id="d1"> 
     <header>A</header> 
    </div> 
    <div id="d2"> 
     <header>B</header> 
    </div> 
    <div id="d3"> 
     <header>C</header> 
    </div> 
</div> 


<img src="trash.jpg" id="trash" class="semitransparent" /> 

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> 
<script> 

$(function(){ 
    // draggables... 

    $("#d1,#d2,#d3").draggable({ 
     revert:"invalid" 
    }); 

    $("#trash").droppable({ 

     activeClass:"opaque", 
     drop: function(event, ui){ 

      ui.draggable.fadeOut(function(){ 
       ui.draggable.remove(); 

      }); 
     } 

    }); 

}); 

मैं भी ट्रैशकैन की छवि के लिए एक activeClass लागू तो उपयोगकर्ता यह जानता है कि वे खींच सकते हैं/कार्यक्षमता सक्रिय है। हालांकि मैं अपना कोड विस्तारित करना चाहता हूं ताकि जब एक डिव गिरा दिया जाए तो इसे "ड्रैगगेल" Div के भीतर अपनी मूल स्थिति में बहाल कर दिया जाए। मुझे यकीन है कि ड्रैग करने योग्य तत्वों पर या फ़ंक्शन के भीतर एक सहायक क्लोन का उपयोग करना है, किसी भी तरह से "ड्रैगगेल" Div में शामिल होना है। क्या किसी के पास कोई सलाह है? क्या कोई तरीका है: ui.draggable.restore(); मैं उपयोग कर सकता हूं?

यदि मेरा शब्द खराब है तो कृपया मुझे बताएं और मैं प्रश्न को दोबारा जोड़ दूंगा।

Answer 1

मुझे लगता है कि आप revert विकल्प की तलाश कर रहे:
http://jqueryui.com/demos/draggable/#option-revert

Answer 2

सहायक: "क्लोन" जाने का रास्ता है और मूल स्थान तुम सिर्फ उपयोग करके उसे निकालने से निकालने के लिए है कि क्या जब आप अपने मन बना लिया .remove()

Answer 3

अलावा तथ्य यह है कि छवि एक droppable होना नहीं चाहता है से, स्क्रिप्ट काम करने के लिए लगता है ...

इस JSFiddle देखें।

Answer 4

यहां एक छोटा कोड है जिसे मैंने अपनी परियोजनाओं में उपयोग करने के लिए अपनाया है।

एचटीएमएल:

<div class="N_COn_USER" name="moh1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

<div class="N_COn_USER" name="demo1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

<div class="N_COn_USER" name="foo1234"> 
<img class="delople" src="_files/us.png" /> 
</div> 

Jquery:

$(document).ready(function() { 

    var id ; 
    id = $(".N_COn_USER").draggable({ // the draggable div 
    revert: true, 
    helper: "clone", 
    start: function(event, ui) { 
    id = $(this).attr("name"); // we name each draggable item with its ID or any unique identifier. And here, we grab that value .. 
    } 
}).attr("name"); 

    $("#dropable_file").droppable({ 
    tolerance: 'touch', 
    drop: function() { 

    var agree=confirm('Permantly delete '+ id2 +"?"); 
    if (agree) { 
     $.ajax({ 
     url: 'unfollow', 
     data: 'u=' + id, // we send that ID to a processing page controller 
     type: 'post', 
     success: function(msg){ 
      if(msg == 'bad') // Message Sent, check and redirect 
      {    // and direct to the success page 
      $("#msgbox").html('').addClass('good'); 
      $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox 
      { 
       //add message and change the class of the box and start fading 
       $(this).html('Tcxfgg').removeClass().addClass('error').fadeTo(300,1); // if not deleted, show an error! 

      });  
      } 
      else // if everything went perfectly 
      { 
      $("div[name="+id+"]").fadeOut("slow"); // the item with that unique name gets faded out on success. 
      $("span[name="+id+"]").fadeOut("slow"); // picture of it also should have its own name if it lives outside that DIV. 


      } 
     } 
     }); 

    } else { 
     return false; 
    } 

    } 
    }); 
}); 

मुझे आशा है कि मदद करता है ..