Question

我正在博客文章样式编辑器的 Body 元素内的图像中实现 jQueryUI Draggable。

本质上，图像被添加到这个名为#EditArea 的元素上，用户在其中输入博客文章的文本，同时插入一个图像，该图像通过带有虚线的父 div 设置样式。

图片不能拖到虚线外，否则会失去样式。

我目前的问题是，一旦用户将图像添加到编辑器的正文中，如果用户在此之后添加任何新的文本行，图像将随整个正文一起“滚动”，并且不留在 Body 元素上。

我的目标是在用户已经添加图像并开始添加文本或换行符时阻止图像在身体上滚动

我已经尝试在此处使用 Draggable API 中的许多变量，例如 scroll 和 grid：jQuery UI Draggable API Documentation 但是，我尝试过的这些变量似乎都无法阻止这种情况。我也曾尝试将 EditArea 设为 Droppable 源，但这也不包含图像。

这是我目前的代码：

HTML：

<body id="EditArea" draggable="true" onpaste="" style="min-height: 500px; width: 800px; padding: 2%; cursor: auto;" contenteditable="true">

<p>You can drag the image below this line:</p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p> </p><br>
<p></p>
<p></p>
<p>You can drag the image ABOVE this line of text</p>
<p></p><br>
<p></p>
<p></p>
<p><br></p>
<p></p><br>
<p></p>
<p><br></p>
<p><br></p>
<p></p>
<br>
<p></p>
<p></p>
<br>
<div draggable="true" class="cleft ui-widget-content ui-draggable" style="position: relative; left: 4px; top: -247px; overflow: auto;">
    <a class="dragImage" href="https://stg1media.sandhills.com/img.axd?id=3006826655&amp;wid=&amp;rwl=False&amp;p=&amp;ext=&amp;w=0&amp;h=0&amp;t=&amp;lp=8&amp;c=True&amp;wt=False&amp;sz=Max&amp;rt=0&amp;checksum=tUhEmBGjsTIbBU5NegnyYOc9lXkw%2fPc4" target="_blank">
    <img src="https://stg1media.sandhills.com/img.axd?id=3006826655&amp;wid=&amp;rwl=False&amp;p=&amp;ext=&amp;w=350&amp;h=350&amp;t=&amp;lp=8&amp;c=True&amp;wt=False&amp;sz=Max&amp;rt=0&amp;checksum=tUhEmBGjsTIbBU5NegnyYOc9lXkw%2fPc4">
    </a>
    <hr>
    <div class="embed-caption">Testing Caption</div>
</div>

jQuery 和 JavaScript：

$(".cleft, .cright, .ccenter").draggable({
                    containment: "#EditArea",
                    scroll: true,
                    grid: [0, 18],  //0 x-axis prevents the image from being dragged out of alignment
                    drag: function () {
                        $(this).css("opacity", .6);
                    },
                    stop: function () {
                        $(this).css("opacity", 1);
                    }
                });
                            $("#EditArea").droppable(
                {
                    drop: function (event, ui) {
                        console.log("dropped");
                        ui.draggable.detach().appendTo($(this));
                    }
                }
            );

这里还有一个用于视觉效果的 JSFiddle JSFiddle

jQueryUI 可拖动图像滚动与正文元素中的新行

0 个答案: