拖放到一个jquery滑块上-将位置贴在服务器上

Question

我试图实现拖动一个项目到jquery滑块。例如，如果项目放置在滑块的86%处，我想将此位置POST到服务器上，以便项目可以放置在服务器上结果集的86%处。

如何检测掉落到jQuery滑块和post到服务器的百分比?

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的例子

希望有帮助，

马克。

来源:Jquery滑块，当鼠标移动时滑动;jQuery UI slider

Answer 2

由于您正在使用jQuery，我们假设您正在使用jQuery UI进行拖放操作。先读这个:http://api.jqueryui.com/droppable/#event-drop

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

例如，在你知道宽度为100px的容器的left -> 90px位置放置，意味着90%是你的神奇数字。

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