Question

我有一个图像和一个或一个标签，使用输入框在它们之间添加了一些文字。我想让文本和图像都可拖动。但是，拖动仅对文本起作用一次。图像可以根据需要拖放多少时间，但文本只能拖动一次。你能找出主要问题吗？

Jquery

$(function() {
    $('#uploadedPhoto').draggable({
        containment: '#dragDiv'
    });
});


$(function() {
        $('.customText').draggable({
            containment: '#dragDiv'
        });
});

CSS

.customText {
    position:absolute;
    cursor:move;
    font-size: 3em;
}
#uploadedPhoto {
    display:none;
    position:relative;
    cursor:move;
    max-height:100%;
    max-width:100%;
    left: 2.5em;
    opacity:0.70;
    }

Jquery版本（html文件中的链接）

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

由于

Answer 1

你包括jQUery两次（使用不同的版本），这可能会导致奇怪的问题。

尝试取出：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 2

您的uploadphoto具有display: none;属性，这意味着它不会被渲染，直到那时它才能被拖动。因此，请从display: none;移除此属性 - #uploadedPhoto，然后重试。

当应用于两个不同的div时，Draggabke只能工作一次

2 个答案: