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

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

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

2013-03-08 user2145475

你說的'item'和'slider'是什麼意思？ – Fresheyeball 2013-03-08 21:10:55

由於我沒有解釋的東西那麼好，我做了一個的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

來源

2013-03-08 22:16:45 Marcky

這就是訣竅！謝謝;-)你知道是否有辦法阻止手柄跳到滴點？ – user2145475 2013-03-09 05:13:12

是的，你可以簡單地做它用«$（本）.find（‘UI滑塊手柄。’）隱藏（）。 »目標滑塊並隱藏它。看到我更新的jsfiddle並回答！祝你好運！ – Marcky 2013-03-09 16:00:37

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

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

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

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

來源

2013-03-08 22:13:16

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

回答

相關問題