1

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

我在第一次加载时遇到的问题一切正常。但是当我再次加载图像时，draggable 停止工作，这意味着拖动工作但 drop 不会。因此，当您开始拖动图像时，您无法放下图像。并且调整大小手柄与第一张图像中的位置相同。

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

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 天里一直在解决这个问题，尝试了很多不同的东西，但没有成功。

4

0 回答 0