प्रतिशत पर आधारित वस्तुओं को खींचने के लिए तत्व

Question

यहां ऐसा लगता है;

$("#box ul li").draggable({ 
    helper: "clone" 
}); 
$(".item").draggable({containment: ".door"}); 

$(".door").droppable({ 
    accept: ":not(.ui-sortable-helper, .item)", 
    drop: function(event, ui) { 
     $("<div class='item'></div>").html(ui.draggable.find("img")).appendTo(this); 
    } 
}); 

उपयोगकर्ता ("#box उल ली") तत्व खींच लेता है $ और $ पर चला जाता है ("। दरवाजा") तत्व। और यह $ ("। Item") चयनकर्ता के साथ $ ("। Door") तत्व में संलग्न करता है।

मैं jquery UI का उपयोग कर रहा हूं - ड्रैग करने योग्य वस्तुओं को खींचने और छोड़ने के लिए। वहां कोई समस्या नहीं है।

यहां वास्तविक प्रश्न है;

लेकिन जब आप तत्व को खींचना शुरू करते हैं, तो फ़ंक्शन तत्व के बाएं और शीर्ष स्थितियों को बदलता है; शीर्ष: 10 पीएक्स बाएं: 10 पीएक्स। लेकिन मैं आइटम को प्रदूषण तत्व पर प्रतिशत के आधार पर खींचना चाहता हूं। यह शीर्ष: 10% होना चाहिए; बाएं: 10%।

यह कैसे करना है इस पर कोई विचार है?

Answer 1

मुझे एक समाधान मिला है;

$(".element").draggable({ 

    stop: function(){ 
    var l = (100 * parseFloat($(this).css("left"))/parseFloat($(this).parent().css("width")))+ "%" ; 
    var t = (100 * parseFloat($(this).css("top"))/parseFloat($(this).parent().css("height")))+ "%" ; 
    $(this).css("left" , l); 
    $(this).css("top" , t); 
    } 

}); 

Answer 2

इस संहिता का प्रयास करें

$('.element').draggable({ 
    containment: 'parent', 
    stop: function(event, ui) { 
     var $elm = $(this); 
     var pos = $elm.position(), 
      parentSizes = { 
       height: $elm.parent().height(), 
       width: $elm.parent().width() 
      }; 

     $elm.css('top', ((pos.top/parentSizes.height) * 100) + '%').css('left', ((pos.left/parentSizes.width) * 100) + '%'); 
}}); 

Answer 3

सब से ऊपर की

लिटिल बिट अद्यतन संस्करण:

$(".item").draggable({ 
    containment: ".door", 
    stop: function(event, ui) { 
    $(this).css("left",parseInt($(this).css("left"))/($(".door").width()/100)+"%"); 
    $(this).css("top",parseInt($(this).css("top"))/($(".door").height()/100)+"%"); 
    } 
});