拖動圖像作爲圖像的句柄按鈕

我有一個圖像，它有一個黃色的按鈕。我想用黃色按鈕作爲手柄，這樣當我上下拖動黃色div時，圖像會跟着上下移動。我的圖像被約束爲y軸，所以同樣按鈕必須被約束爲y軸。拖動圖像作爲圖像的句柄按鈕

這裏是一個小提琴： http://jsfiddle.net/michelm/9Vwzp/

和jQuery代碼：

$(function(){ 
    $(".headerimage").css('cursor','s-resize'); 
    var y1 = $('.container').height(); 
    var y2 = $('img').height(); 
    $("img").draggable({ 
     scroll: false, 
     axis: "y", 
     handle: "div.button" // this is not working 
     drag: function(event, ui) { 
      if(ui.position.top >= 0) 
      { 
       ui.position.top = 0; 
      } 
      else if(ui.position.top <= y1 - y2) 
      { 
       ui.position.top = y1 - y2; 
      } 
     }, 
     stop: function(event, ui) { 
      //#### 
     } 
    });      
});

來源

2013-10-30 Michel

這裏是你要找的功能的>>>JSFiddle<<<解決方案。

下面是代碼：

HTML：

<div class="wrapper"> 
    <div class="button"></div> 
    <div class="container"> 
     <img class="headerimage" src="http://www.mywedding.com/main/honeymoon/images/beach_splash.jpg" /> 
    </div> 
</div>

CSS：

.wrapper { 
    position: relative; 
    height: 150px; 
    width: 700px; 
    overflow: hidden; 
} 
.container { 
    position: absolute; 
    top: 0px; 
    bottom: -250px; 
    width: 650px; 
} 
.button { 
    position: absolute; 
    cursor: s-resize; 
    background-color: yellow; 
    opacity:0.6; 
    border: 2px solid; 
    border-radius: 25px; 
    top: 0px; 
    right: 10px; 
    height: 20px; 
    width: 20px; 
    z-index:2; 
}

的jQuery：

var wrapHeight = $('.wrapper').outerHeight(true); 
var contHeight = $('.container').outerHeight(true); 

function drag() { 
    var btnPos = $('.button').position().top; 
    $('.container').css({ 
     top: -(btnPos * (contHeight/wrapHeight)) 
    }); 
} 

$('.button').draggable({ 
    axis: 'y', 
    containment: '.wrapper', 
    drag: function() {drag()} 
});

來源

2013-10-30 08:23:14

從jQuery API上Draggable：

如果指定，則限制從起始處拖動，除非在指定的元素上出現mousedown 。只允許從可延伸元素下降的元素。

所以我的猜測是你的按鈕不是圖像元素的後代。我盡了最大的努力來解決這個錯誤 - 雖然這不是完美的，但我希望它能給你一個很好的起點。通過將按鈕和圖像放入第二個容器（在您現有的容器中），將id分配給標記以使功能更清晰，並將一些東西添加到HTML/CSS中，我得到了該控制柄的工作方式。在充滿變化的位置：http://jsfiddle.net/beMaG/1/

的關鍵領域是：

的HTML：

<div class="wrapper"> 
    <div class="container" id="container1"> 
     <!--Here, I enclose another container in which button/image are inside--> 
     <div class="containerNew" id="container2"> 
      <img class="headerimage" src="http://www.mywedding.com/main/honeymoon/images/beach_splash.jpg" /> 
      <div class="button" id="dragme"></div> 
     <div> 
    </div>  
</div>

相關的jQuery：

$("#container2").draggable({ 
     scroll: false, 
     axis: "y", 
     handle: "#dragme", // added id 
     // this next part I changed to get full up/down scrolling to work 
     // You'll have to change this to get the functionality you want 
     drag: function(event, ui) { 
      if(ui.position.top <= y1 - y2) 
      { 
       ui.position.top = y1 - y2; 
      } 

     } 
    });

和額外的CSS（像其他容器，但溢出設置爲新的）：

.containerNew { 
    overflow: visible; position: relative; width: 650px; height: 150px; border: 1px solid #888;} 
}

聲明：我是jQuery的新手。如果我的解釋的任何部分看起來不正確，請讓我知道！

來源

2013-10-30 08:23:33

拖動圖像作爲圖像的句柄按鈕

回答

相關問題