拖放到一个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。如果您在弹出的下拉事件的事件控制台日志，你会看到，它也暴露了，你放弃了它的偏移量，你可以再次消费，在你的计算％。