如何获取像素数，div已拖入jqueryui交互

Question

我正在开发一个设计器应用程序，它将 div 拖到 jquery 中的另一个 div 中。它允许调整大小和拖动放置在外部 div 中的 div。我正在使用 jquery ui 交互库。

我有一部分我的原始代码块如下

     $("#canvas-holder").droppable({    
     accept: '.cmp',
     tolerance: 'pointer',
     drop: function(event, ui) {
             $('#save_button').prop("disabled", false);
             x = ui.helper.clone();
             $(this).append(x.attr('id',generateUniqueID(x)).addClass("resizable ui-resizable"));
             $("#canvas-holder .cmp").addClass("item");
             $(".item").removeClass("ui-draggable cmp");


             current_component_height = $("#canvas-holder").height();
             current_component_width = $("#canvas-holder").width();
             existingElements[$(x).attr("id")] = [current_component_height,current_component_width] 
             alert(JSON.stringify(existingElements))

             $(".item").css({
                 "left": $("#canvas-holder").offset().left+"px",
                 "top": $("#canvas-holder").offset().top+"px",
                 "height": ($("#canvas-holder").height())/4+"px",
                 "width": $("#canvas-holder").width()+"px"
             });


             $(".item").resizable({resize: function(event, ui) {
                                    $("form input[name=width]").removeAttr('max')
                                    $("form input[name=height]").removeAttr('max')
                                     restrictSize(ui);
                                     console.log("before: "+$(this).height())
                                     var height = $(this).height() * 5.0;
                                    console.log("after: "+height)
                                     if($(this).height() <= canvasHeight){
                                       $("form input[name=height]").val(height)
                                     }else{
                                       var rem=(canvasHeight - $(this).height())*5
                                       height= Math.round(height + rem); 
                                       $("form input[name=height]").val(height)
                                     }

                                     var width = $(this).width() * 5.0;
                                     if($(this).width() <= canvasWidth){
                                         $("form input[name=width]").val(width)
                                     }else{
                                       var rem=(canvasWidth - $(this).width())*5
                                       width= Math.round(width + rem); 
                                       $("form input[name=width]").val(width)
                                     }
                                     }
                         });

             $(".item").draggable({
                 containment: '#canvas-holder',
                 drag: function(){
                     console.log($(this).scrollTop())
                     $("form input[name=width]").removeAttr('max')
                     $("form input[name=height]").removeAttr('max')
                     var offset = $(this).offset();
                     if($(this).hasClass('selected')){
                        var comp_ypoint = offset.top - canvas_ypoint;
                        var comp_xpoint = offset.left - canvas_xpoint;
                        comp_xpoint = comp_xpoint * 5.0
                        comp_ypoint = comp_ypoint * 5.0

                        if(comp_xpoint>=0)
                             $("form #x-cord-id").val(comp_xpoint)

                        if(comp_ypoint>=0)
                            $("form #y-cord-id").val(comp_ypoint)
                     }
             }
             });

我正在实现新功能，但为此我想知道是否有任何方法可以提供 div 垂直和水平移动的像素数。我试图找到这将近 8 个小时。有人可以告诉我功能中是否有 build，否则我该如何制作？

Answer 1

使用传递到 drag 事件处理程序的第二个参数：

drag: function(e,ui) {
    var verticalDistance = ui.position.top - ui.originalPosition.top;
    var horizontalDistance = ui.position.left - ui.originalPosition.left;
    // ... etc
}

举个例子：https://jsfiddle.net/nwk255ar/

参考：http://api.jqueryui.com/draggable/#event-drag

如何获取像素数，div已拖入jqueryui交互

how to get the number of pixel, the div has dragged in jquery ui interaction

jquery

jquery-ui

jquery-plugins