1

我正在尝试将项目拖动到 jquery 滑块上。例如，如果项目被放到滑块的 86% 上，我想将此位置发布到服务器，以便项目可以沿着服务器上的结果集放置 86%。

你如何检测到 jQuery 滑块的下降和 POST 到服务器的百分比？

4

2 回答 2

1

由于您使用的是 jQuery，假设您使用 jQuery UI 进行拖放。首先阅读：http ://api.jqueryui.com/droppable/#event-drop

然后意识到作为事件的一部分，您获得了被放置元素相对于可放置容器的偏移位置。如果需要，您可以在此处将其计算为百分比。

例如，在您知道宽度为 100 像素的容器的左侧 -> 90 像素处放置意味着 90% 是您的幻数。

或者，如果您使用本机拖放，请查看这个简单的编辑：http: //jsbin.com/ezuke/3283/edit。如果您在 drop 事件中弹出事件的控制台日志，您将看到它还公开了您丢弃它的位置的偏移量，您可以在计算 % 时再次使用它。

于 2013-03-08T22:13:16.400 回答
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 示例

希望能帮助到你，

马克。

资料来源： 鼠标移动时滑动的 Jquery 滑块， jQuery UI 滑块

于 2013-03-08T22:16:45.777 回答