具有8个手柄和拖动的图像缩放器下降

时间:2010-10-27 19:55:38

标签: javascript jquery image drag-and-drop resize

我正在构建一个简单的应用程序,它将一个图像重叠在另一个图像之上。最上面的一个需要可拖动和可调整大小。最初我认为jQuery UI是个好主意,它有两个主要问题:

  1. 出于某种原因,即使Chrome被强加给不同的元素,Chrome也不喜欢这两种行为。
  2. 我需要8个手柄,就像任何图像处理软件的标准一样。
  3. 这是我的代码

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
    <script>
    $(document).ready(function(){
        $(".draggable").draggable();
        $(".resizable").resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });
    });
    </script>
    
    <img src="http://i.stack.imgur.com/TWqnS.jpg" />
    <span class="draggable">
    <img src="http://i.stack.imgur.com/2fmzr.png" width="192" height="192" class="resizable" />
    </span>
    

    我不能将这两种行为都设置为同一个元素,因为它会混淆一些东西。

    我需要的是像jCrop这样的东西,唯一的区别是我没有裁剪图像,而是将图像重叠在另一个图像之上。句柄正是我需要的,但是当前的选项不会让我更改可调整大小的元素,因为它是一个div而且我需要一个图像。

    感谢。

1 个答案:

答案 0 :(得分:0)

我最终使用jCrop,将<img>元素附加到可调整大小的框并将其调整为父级。