Question

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

如何检测掉到jQuery滑块上以及POST到服务器的百分比？

Answer 1

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

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

例如，在左侧位置下降 - ＆gt; 90px的容器，你知道宽100px意味着90％是你的神奇数字。

如果您使用的是原生拖放，请查看以下简单修改：http://jsbin.com/ezuke/3283/edit。如果您在drop事件中弹出控制台登录事件，您将看到它还公开了丢弃它的位置的偏移量，您可以在计算％时再次使用它。

Answer 2

由于我不太擅长解释事情，所以我为你做了一个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

拖放到jquery滑块上 - 将位置发布到服务器

2 个答案: