javascript – 如何获取JqueryUI可以使用缩放/缩放 – 鼠标移动进行排序

前端之家收集整理的这篇文章主要介绍了javascript – 如何获取JqueryUI可以使用缩放/缩放 – 鼠标移动进行排序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用 Jquery UI Sortable进行缩放.问题是鼠标不会像拖动的元素一样移动.有很多关于如何使用Draggable工作的例子.以下是Draggable项目的解决方法示例:

http://jsfiddle.net/TqUeS/660/

var zoom = $('#canvas').css('zoom');
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();

$('.dragme').draggable({
drag: function(evt,ui)
{
    // zoom fix
    ui.position.top = Math.round(ui.position.top / zoom);
    ui.position.left = Math.round(ui.position.left / zoom);

    // don't let draggable to get outside of the canvas
    if (ui.position.left < 0) 
        ui.position.left = 0;
    if (ui.position.left + $(this).width() > canvasWidth)
        ui.position.left = canvasWidth - $(this).width();  
    if (ui.position.top < 0)
        ui.position.top = 0;
    if (ui.position.top + $(this).height() > canvasHeight)
        ui.position.top = canvasHeight - $(this).height();  

}                 
});

我希望Drag事件可以在Sortable版本的Sort事件中被替换,但是从下面的小提琴中可以看出它不起作用.在sort事件中设置ui.position没有任何效果 – 似乎在事件触发后设置它并丢弃它.

http://jsfiddle.net/TqUeS/658/

var zoom = $('#canvas').css('zoom');
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();

$('#canvas').sortable({
    items: "div",sort: function(evt,ui)
{
    // zoom fix
    ui.position.top = Math.round(ui.position.top / zoom);
    ui.position.left = Math.round(ui.position.left / zoom);

    // don't let draggable to get outside of the canvas
    if (ui.position.left < 0) 
        ui.position.left = 0;
    if (ui.position.left + $(this).width() > canvasWidth)
        ui.position.left = canvasWidth - $(this).width();  
    if (ui.position.top < 0)
        ui.position.top = 0;
    if (ui.position.top + $(this).height() > canvasHeight)
        ui.position.top = canvasHeight - $(this).height();  

}                 
});

如果有人有其他解决方法,我很乐意听到.

解决方法

可拖动和可排序的轻微差异.一般来说,ui.helper是项目,位置不会以同样的方式影响,它只是一个报告的位置.

对于可拖动,拖动ui.position,它指出:

Current CSS position of the helper as { top,left } object. The values may be changed to modify where the element will be positioned. This is useful for custom containment,snapping,etc.

对于Sortable,对于ui.position,它指出:

The current position of the helper represented as { top,left }.

尝试这个:

示例:http://jsfiddle.net/Twisty/4nv60ob9/2/

HTML

<div id="canvas" data-zoom="0.5">
  <div class="dragme"></div>
  <div class="dragme"></div>
  <div class="dragme"></div>
</div>
<div id="report"></div>

JavaScript的

var zoom = $("#canvas").data("zoom");
console.log(typeof zoom,zoom.toString());
var canvasHeight = $('#canvas').height();
var canvasWidth = $('#canvas').width();

$('#canvas').sortable({
  items: "div",start: function(e,ui) {
    console.log("Sort Start Triggered");
  },ui) {
    console.log("Sort Triggered");
    // zoom fix
    ui.position.top = Math.round(ui.position.top / zoom);
    ui.position.left = Math.round(ui.position.left / zoom);
    $("#report").html("Top: " + ui.position.top + " Left: " + ui.position.left);

    // don't let draggable to get outside of the canvas
    if (ui.position.left < 0) {
      ui.helper.css("left",0);
    }
    if (ui.position.left + ui.helper.width() > canvasWidth) {
      ui.helper.css("left",(canvasWidth - ui.helper.width()) + "px");
    }
    if (ui.position.top < 0) {
      ui.helper.css("top",0);
    }
    if (ui.position.top + ui.helper.height() > canvasHeight) {
      ui.helper.css("top",(canvasHeight - ui.helper.height()) + "px");
    }
    $("#report").html("Top: " + (canvasHeight - ui.helper.height()) + " Left: " + (canvasWidth - ui.helper.width()));
  }
});

我认为这是以同样的方式工作的.

原文链接:https://www.f2er.com/jquery/153997.html

猜你在找的jQuery相关文章