拖放到一個jQuery滑塊 - 張貼位置服務器

Question

我試圖實現拖動項目到jQuery的滑塊。例如，如果該項目被丟棄到滑塊的86％，我想這個位置發送到服務器這樣的項目可以沿結果在服務器上設置成爲地方86％。

你如何檢測滴到jQuery的滑塊，併發布到服務器中的百分比是多少？

Answer 1

由於我沒有解釋的東西那麼好，我做了一個的jsfiddle你。雖然這可能不是確切您尋找的東西，它應該是一個很好的起點！

下面的代碼：

$(function() { 

    //the draggable object 
    $("#dragobject").draggable(); 

    //Prepare the slider 
    var range = 100, 
     sliderDiv = $("#slider"); 

    // Activate the UI slider 
    sliderDiv.slider({ 
     min: 0, 
     max: range, 
     create : function(){ 
      $(this).find(".ui-slider-handle").hide(); 
     } 
    }); 

    // Number of tick marks on slider 
    var position = sliderDiv.position(), 
     sliderWidth = sliderDiv.width(), 
     minX = position.left, 
     maxX = minX + sliderWidth, 
     tickSize = sliderWidth/range; 

    //Set slider as droppable 
    sliderDiv.droppable({ 
     //on drop 
     drop: function (e, ui) { 

      var finalMidPosition = $(ui.draggable).position().left + Math.round($("#dragobject").width()/2); 

      //If within the slider's width, follow it along 
      if (finalMidPosition >= minX && finalMidPosition <= maxX) { 

       var val = Math.round((finalMidPosition - minX)/tickSize); 
       sliderDiv.slider("value", val); 
       alert(val + "%"); 

       //do ajax update here to set the position 
       /*$.ajax({ 
        type: "POST", 
        url: url, 
        data: val, 
        success: function() { 
         //congrats 
        }, 
        dataType: dataType 
       });*/ 

      } 
     } 
    }); 

}); 

而這裏的的jsfiddle鏈接：jsFiddle example

希望它能幫助，

馬克。

來源： Jquery slider that slides while mouse move， jQuery UI slider

Answer 2

由於您使用jQuery，讓我們假設你正在使用jQuery UI爲您拖放。首先閱讀：http://api.jqueryui.com/droppable/#event-drop

然後意識到，你作爲事件的一部分被丟棄的元素相對於可投放容器的偏移位置。如果你需要的話，這將是你可以把它計算成百分比的地方。

例如，在下降位置左 - > 90像素，你知道是100分像素寬的手段90％是你的幻數的容器中。

或者，如果你正在使用本機拖放，看看這個簡單的編輯：http://jsbin.com/ezuke/3283/edit。如果您在彈出的下拉事件的事件控制檯日誌，你會看到，它也暴露了，你放棄了它的偏移量，你可以再次消費，在你的計算％。