jQuery - ड्रैग div css पृष्ठभूमि

Question

मैं अपने माउस को एक div के अंदर पकड़ने और अपनी पृष्ठभूमि को स्थानांतरित करने में सक्षम होना चाहता हूं। Google पर बहुत सी खोज की और मुझे जो चाहिए वह नहीं मिला। http://pontografico.net/pvt/gamemap/

कोई युक्ति:

यहाँ लक्ष्य है (मानचित्र दिखाया गया खींचें करने के लिए वस्तु है)?

चीयर्स!

Answer 1

ठीक है, इसे काम करने के लिए मिला; मुझे लगता है मैं सभी अवरोधों को हटाने मिला लगता है: Bounding सीमा

$(document).ready(function(){ 
    var $bg = $('.bg-img'), 
     elbounds = { 
      w: parseInt($bg.width()), 
      h: parseInt($bg.height()) 
     }, 
     bounds = {w: 2350 - elbounds.w, h: 1750 - elbounds.h}, 
     origin = {x: 0, y: 0}, 
     start = {x: 0, y: 0}, 
     movecontinue = false; 

    function move (e){ 
     var inbounds = {x: false, y: false}, 
      offset = { 
       x: start.x - (origin.x - e.clientX), 
       y: start.y - (origin.y - e.clientY) 
      }; 

     inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w; 
     inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h; 

     if (movecontinue && inbounds.x && inbounds.y) { 
      start.x = offset.x; 
      start.y = offset.y; 

      $(this).css('background-position', start.x + 'px ' + start.y + 'px'); 
     } 

     origin.x = e.clientX; 
     origin.y = e.clientY; 

     e.stopPropagation(); 
     return false; 
    } 

    function handle (e){ 
     movecontinue = false; 
     $bg.unbind('mousemove', move); 

     if (e.type == 'mousedown') { 
      origin.x = e.clientX; 
      origin.y = e.clientY; 
      movecontinue = true; 
      $bg.bind('mousemove', move); 
     } else { 
      $(document.body).focus(); 
     } 

     e.stopPropagation(); 
     return false; 
    } 

    function reset(){ 
     start = {x: 0, y: 0}; 
     $(this).css('backgroundPosition', '0 0'); 
    } 

    $bg.bind('mousedown mouseup mouseleave', handle); 
    $bg.bind('dblclick', reset); 
}); 

http://jsfiddle.net/userdude/q6r8f/4/

---

मूल उत्तर के साथ

अंतिम jQuery

एचटीएमएल

<div class="bg-img"></div> 

सीएसएस

div.bg-img { 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/9/91/Flexopecten_ponticus_2008_G1.jpg); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    background-color: blue; 
    border: 1px solid #aaa; 
    width: 250px; 
    height: 250px; 
    margin: 25px auto; 
} 

jQuery

$(document).ready(function(){ 
    var $bg = $('.bg-img'), 
     origin = {x: 0, y: 0}, 
     start = {x: 0, y: 0}, 
     movecontinue = false; 

    function move (e){ 
     var moveby = { 
      x: origin.x - e.clientX, 
      y: origin.y - e.clientY 
     }; 

     if (movecontinue === true) { 
      start.x = start.x - moveby.x; 
      start.y = start.y - moveby.y; 

      $(this).css('background-position', start.x + 'px ' + start.y + 'px'); 
     } 

     origin.x = e.clientX; 
     origin.y = e.clientY; 

     e.stopPropagation(); 
     return false; 
    } 

    function handle (e){ 
     movecontinue = false; 
     $bg.unbind('mousemove', move); 

     if (e.type == 'mousedown') { 
      origin.x = e.clientX; 
      origin.y = e.clientY; 
      movecontinue = true; 
      $bg.bind('mousemove', move); 
     } else { 
      $(document.body).focus(); 
     } 

     e.stopPropagation(); 
     return false; 
    } 

    function reset(){ 
     start = {x: 0, y: 0}; 
     $(this).css('backgroundPosition', '0 0'); 
    } 

    $bg.bind('mousedown mouseup mouseleave', handle); 
    $bg.bind('dblclick', reset); 
}); 

http://jsfiddle.net/userdude/q6r8f/2/

Answer 2

ui खींचने योग्य डेमो से:

खींच डोम तत्वों सरल, पहिया बदलने की कोई जरूरत नहीं है।

<style> 
#draggable { width: 150px; height: 150px; padding: 0.5em; } 
</style> 
<script> 
    $(function() { 
     $("#draggable").draggable(); 
    }); 
</script> 



<div class="demo"> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

</div><!-- End demo --> 



<div class="demo-description" style="display: none; "> 
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p> 
</div><!-- End demo-description --> 

http://jqueryui.com/demos/draggable/

संपादित करें: एक div अंदर खींचने योग्य पृष्ठभूमि भी संभव है। यहां देखें: http://jsfiddle.net/FyFZA/

Answer 3

इस पोस्ट के लिए एक उत्कृष्ट शुरुआती बिंदु था मेरी मुद्दा। मैं ऊपर जवाब संयुक्त, और एक अन्य अपनी पृष्ठभूमि छवि के मूल आयाम हो रही से संबंधित (SO:How do I get background image size in jQuery?)

मेरी विशेष सेटअप के साथ

मैं background-size:cover उपयोग कर रहा था तो मैं पृष्ठभूमि छवि की ऊंचाई/चौड़ाई का अनुपात का निर्धारण और तुलना करने के लिए किया था यह कंटेनर की ऊंचाई/चौड़ाई के अनुपात के लिए। इसका मतलब है कि प्रत्येक छवि को केवल एक आयाम में स्लाइड करने की अनुमति है।

यहां दो अतिरिक्त सुविधाएं आपको आवश्यकता नहीं हो सकती है। मैंने उस तत्व को एक सीमा जोड़ा जो मैं वर्तमान में इसे देखने में आसान रखने के लिए छेड़छाड़ कर रहा था, जब मैंने किया था तो इसे हटा दिया। मैंने ऑफसेट मानों के साथ एक इनपुट भी अपडेट किया, इसलिए मैं उन्हें सर्वर पर भेज सकता था।

मुझे मेरी टिप्पणियों के साथ बहुत verbose लगता है, तो यह थोड़ा लंबा है, लेकिन मुझे उम्मीद है कि यह किसी की मदद करता है।

<script> 
$(document).ready(function(){ 

    function reset(){ 
     start = {x: 0, y: 0}; 
     $(this).css('backgroundPosition', '0 0'); 
    } 

    $(".bg-img").bind('dblclick', reset); 

    //my jquery 
$(".bg-img").on('mousedown mouseup', function(e){ 

    //declare some vars 
    var start = {x: 0, y: 0}; 
    var move = {x: 0, y: 0}; 
    var id = $(this).attr('id'); 

    //pointer coordinates on mousedown 
    var origin = {x: 0, y: 0}; 

    //container dimensions 
    var container = {w: $(this).width(), h: $(this).height()}; 

    //container ratio 
    var containerRatio = container.h/container.w; 

    //background image dimensions, note: this gets dimensions of unscaled image 
    var img = new Image; 
    img.src = $(this).css('background-image').replace(/url\(|\)$/ig, ""); 
    var background = {w: img.width, h: img.height}; 

    //background ratio 
    var backgroundRatio = background.h/background.w; 

    //max x and y position, aka boundary 
    var min = {x: 0, y: 0}; 
    var max = {x: 0, y: 0}; 

    //move x 
    if(backgroundRatio < containerRatio){ 
     min.y = 0; 
     min.x = -((container.h * (1/backgroundRatio)) - container.w); 
    } 

    //move y 
    else if (backgroundRatio > containerRatio){ 
     min.x = 0; 
     min.y = -((container.w * backgroundRatio) - container.h); 
    } 

    //ratios are equal, don't move anything 
    else{ 
     min.x = 0; 
     min.y = 0; 
    } 

    //activate 
    if(e.type == 'mousedown'){ 

     //add border so it's easier to visualize 
     $(this).css('border', '1px solid #000000'); 

     //get current position of mouse pointer 
     origin.x = e.clientX; 
     origin.y = e.clientY; 

     //get current background image starting position 
     var temp = $(this).css('background-position').split(" "); 
     start.x = parseInt(temp[0]); 
     start.y = parseInt(temp[1]); 

     //mouse is dragged while mousedown 
     $(this).mousemove(function(e){ 

      //move position 
      move.x = start.x + (e.clientX - origin.x); 
      move.y = start.y + (e.clientY - origin.y); 

      //if it's in the bounds, move it 
      if(move.x <= max.x && move.x >= min.x && move.y <= max.y && move.y >= min.y){ 

       console.log('both'); 

       //alter css 
       $(this).css('background-position', move.x + 'px ' + move.y + 'px'); 

       //update input 
       $("#" + id).val('x:' + move.x + ', y:' + move.y); 
      } 

      //in x bound, 
      else if(move.x <= max.x && move.x >= min.x){ 

       console.log('x'); 

       //below min.y 
       if(move.y < min.y){ 
        $(this).css('background-position', move.x + 'px ' + min.y + 'px'); 

        //update input 
        $("#" + id).val('x:' + move.x + ', y:' + min.y); 
       } 
       //above max.y 
       else if(move.y > max.y){ 
        $(this).css('background-position', move.x + 'px ' + max.y + 'px'); 

        //update input 
        $("#" + id).val('x:' + move.x + ', y:' + max.y); 
       } 
      } 

      //in y bound 
      else if(move.y <= max.y && move.y >= min.y){ 

       console.log('y'); 

       //below min.x 
       if(move.x < min.x){ 
        $(this).css('background-position', min.x + 'px ' + move.y + 'px'); 

        //update input 
        $("#" + id).val('x:' + min.x + ', y:' + move.y);    
       } 

       //above max.x 
       else if(move.x > max.x){ 
        $(this).css('background-position', max.x + 'px ' + move.y + 'px'); 

        //update input 
        $("#" + id).val('x:' + max.x + ', y:' + move.y); 
       } 
      } 

      //out of both bounds 
      else{ 
       console.log('problem'); 
      } 
     }); 
    } 

    //deactivate 
    else{ 

     //remove border 
     $(this).css('border', 'none'); 

     //remove mousemove 
     $(this).off('mousemove'); 
     $(document.body).focus(); 
    } 
}); 
}); 
</script> 

Answer 4

मैं जानता हूँ कि यह एक पुरानी पोस्ट है, लेकिन अगर आप jQueryUI उपयोग कर रहे हैं एक और समाधान पृष्ठभूमि के शीर्ष पर एक पारदर्शी तत्व बनाने के लिए है, तो मूल नोड के backgroundPosition अद्यतन करने के लिए खींचें कॉलबैक का उपयोग करें। यहाँ एक उदाहरण है:

/* node is the element containing the background image */ 
/* width/height variables are just there if your background image is a different width/height then the container */ 
var transparent = $('<div></div>'); 
transparent.css({ 
    position: 'absolute', 
    zIndex: 10, 
    left: node.offset().left, 
    top: this.node.offset().top, 
    width: width || node.width(), 
    height: height || node.height(), 
    backgroundColor: '#fff', 
    opacity: 0.2 
}); 

$('body').append(transparent); 

options.config.drag = function(event, ui) { 
    node.css({ backgroundPosition: (ui.position.left - ui.originalPosition.left) + 'px ' + (ui.position.top - ui.originalPosition.top) + 'px' }); 
}; 

$(transparent).draggable(options.config); 

मैं जानबूझकर एक अस्पष्टता के साथ एक सफेद पृष्ठभूमि रंग छोड़ दिया है ताकि आप तत्व जब परीक्षण देख सकता था।