javascript - html中图像的旋转和拖动

Question

先生，

在我的 HTML 页面中，有一个图像和两个用于顺时针和逆时针方向旋转该图像的按钮。而且我还需要使该图像可拖动。我有进行拖动和旋转的代码。

我使用以下 JavaScript 进行拖动：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(function () {
        $('#Image1').draggable();
        $('#WaterMark').draggable();
    });
</script>

我使用以下 JavaScript 进行旋转：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var angle = 0;
        $('#btnRotCw').on('click', function () {
            angle += 2;
            $("#Image1").rotate(angle);
        });
        $('#btnRotAcw').on('click', function () {
            angle -= 2;
            $("#Image1").rotate(angle);
        });
    });
</script>

但是这里没有发生轮换。

谁能指导我。提前致谢。

Answer 1

我在您的代码中没有看到任何错误。我已经包括了一个工作小提琴。
这是一个工作小提琴

$(function () {
        $('#image').draggable();
        $('#image1').draggable();
});

$(document).ready(function () {
        var angle = 0;
        $('#button1').on('click', function () {
            angle += 2;
            $("#image").rotate(angle);
        });
        $('#button2').on('click', function () {
            angle -= 2;
            $("#image").rotate(angle);
        });
    });

Answer 2

您的 html 代码一定有一些问题，或者您没有向我们展示的内容。下面是一个工作小提琴，可以完成您期望代码执行的操作。

工作小提琴

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var angle = 0;
        $('#btnRotCw').on('click', function () {
            angle += 2;
            $("#Image1").rotate(angle);
        });
        $('#btnRotAcw').on('click', function () {
            angle -= 2;
            $("#Image1").rotate(angle);
        });
        $('#Image1').draggable();
    });
</script>

避免加载两个单独的 jQuery 实例，因为它们会相互冲突。