Question

我正在尝试使用我们网站产品页面上的jQuery UI构建一个非常简单的照片编辑模块，但是我遇到了一个严重的问题。

我在第一次加载时面临的问题一切正常。但是当我再次加载一个图像时，拖动工作就会停止工作，意味着拖动工作但不会掉线。因此，当您开始拖动图像时，无法删除图像。并且调整大小手柄与第一张图像中的位置保持相同。

下面是我的代码（其中一些，我认为很重要）

HTML

<div id="pp-dlite-area">
<div id="dl-canvas">
    <div class="dl-design-mask">&nbsp;</div>
    <div class="dl-photo-wrap">
        <img id="pp-dlite-photo-mask1" class="dl-photo" />
        <img id="pp-dlite-photo-image1" class="dl-photo-img dl-linked" />
        <img id="pp-dlite-photo-trans1" class="dl-photo-trans dl-linked" />
        <div class="dl-photo-trap dl-linked">&nbsp;</div>
    </div>
</div>

的Javascript

    ....
    ....

    //START RESIZE AND DRAG_DROP
    $j(".dl-photo").resizable({
        aspectRatio: true,
        resize: function () {
            $j(this).parent().find('.dl-linked').width($j(this).width());
            $j(this).parent().find('.dl-linked').height($j(this).height());
            $j(this).parent().find('.dl-photo-trans').css('zIndex', $j(this).parent().find('.dl-photo-trap').css('zIndex'));
        },
        stop: function () {
            $j(this).parent().find('.dl-photo-trans').css('zIndex', $j(this).parent().find('.dl-photo').css('zIndex'));
        }
    })
        .parent().draggable({
        containment: "#dl-canvas",
        drag: function () {
            $j(this).parent().find('.dl-linked').css('top', $j(this).css('top'));
            $j(this).parent().find('.dl-linked').css('left', $j(this).css('left'));
            $j(this).parent().find('.dl-photo-trans').css('zIndex', $j(this).parent().find('.dl-photo-trap').css('zIndex'));
        },
        stop: function () {
            $j(this).parent().find('.dl-linked').css('top', $j(this).css('top'));
            $j(this).parent().find('.dl-linked').css('left', $j(this).css('left'));
            $j(this).parent().find('.dl-photo-trans').css('zIndex', $j(this).parent().find('.dl-photo').css('zIndex'));
        }
    });

    $j(".dl-photo-trans").draggable({
        containment: "#dl-canvas"
    });

    $j(".dl-photo-img").draggable({
        containment: "#dl-canvas"
    });

   ......
   ......
   .....

记住一切正常工作第一次图像加载，就像有些东西在图像加载后不会刷新:(

请帮助我，因为我在这个问题上工作了2天，尝试了很多不同的东西，但都没有成功。

jQuery Resizable＆amp;的问题可拖动

0 个答案: