jquery - 如何使可拖动图像始终出现在溢出容器内的前面

Question

我在让我的可拖动图像总是在前面时遇到了问题，当我的容器没有溢出样式时我没有问题但我需要我的容器有 overflow-x:auto;因为我有很多图片要显示:

但是当我把 overflow-x:auto;当我拖动图像时，它出现在它自己的容器的后面但扩展了溢出..

这是我的 html:

  <div id="dvSource">
 <img alt="" name="Cocolate" quantity="1" price="20.99" src="images/flavor/Chocolate.png" />
                <img alt="" name="Mint-Chocolate-Chip" quantity="1" price="40.99" src="images/flavor/Mint-Chocolate-Chip.png" />
                <img alt="" name="Triple-Tornado" quantity="1" price="20.99" src="images/flavor/Triple-Tornado.png" />
                <img alt="" name="Vanilla-Bean" quantity="1" price="50.99" src="images/flavor/Vanilla-Bean.png" />
                <img alt="" name="Vanilla" quantity="1" price="30.9" src="images/flavor/Vanilla.png" />
                <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" />
                <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" />
                <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" />
                       <img alt="" name="Cocolate" quantity="1" price="20.99" src="images/flavor/Chocolate.png" />
                <img alt="" name="Mint-Chocolate-Chip" quantity="1" price="40.99" src="images/flavor/Mint-Chocolate-Chip.png" />
                <img alt="" name="Triple-Tornado" quantity="1" price="20.99" src="images/flavor/Triple-Tornado.png" />
                <img alt="" name="Vanilla-Bean" quantity="1" price="50.99" src="images/flavor/Vanilla-Bean.png" />
                <img alt="" name="Vanilla" quantity="1" price="30.9" src="images/flavor/Vanilla.png" />
                <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" />
                <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" />
                <img alt="" name="Cockies-&-Cream" quantity="1" price="50.96" src="images/flavor/Cockies-&-Cream.png" />
            </div>

和我的用于可拖动图像的 Jquery:

 $("#dvSource img").draggable({
                revert: "invalid",
                snap: "#dvSource",
                stack: ".draggable",
                refreshPositions: true,
                drag: function (event, ui) {
                ui.helper.addClass("draggable");
                },
)};

我搜索并发现这可能有帮助

 stack: ".draggable",

但仍然是相同的结果我的图像仍然在容器的后面

为了清楚起见，请看下面我的问题图片:

这是我拖动图像时想要的结果:

这是我的容器 CSS

   #dvSource
        {
            border: 5px solid #ccc;
            padding: 5px;
            min-height: 50px;
            width: 885px;
            height:120px;
            overflow-x: auto;
            overflow-y: auto;

        }

和图像的CSS

 img
        {
            height: 120px;
            width: 120px;
            margin: 1px;
            border:solid gray 2px;

        }

提前致谢!..

Answer 1

Jquery draggable with relative positioned elements is not always easy to work with。在您的情况下，您可能需要查看 sortable，它可能更适合您的需要。

https://jqueryui.com/sortable/

除此之外，解决问题的一种方法是使用 appendTo 选项，并将其设置为 'body'。如果您的元素不在溢出 div 之外，我认为您不能移动它。 AppendTo 会把它取出来，所以它会在溢出 div 的前面。

但要使用appendTo，您需要将helper设置为clone。如果你想保持你想要的效果，你可以在 start 事件上将原始元素设置为 opacity: 0，然后在 stop 上设置它回到 1。

它可能会起作用，但您可能需要进行一些调整。它看起来像这样:

$("#dvSource img").draggable({
                helper: 'clone'.
                appendTo: 'body',
                revert: "invalid",
                snap: "#dvSource",
                stack: ".draggable",
                refreshPositions: true,
                start: function(event, ui){
                    $(this).css('opacity', '0');
                },
                stop: function(event, ui){
                    $(this).css('opacity', '1');
                }
                drag: function (event, ui) {
                ui.helper.addClass("draggable");
                },
)};

但同样，您应该查看 sortable，根据我对您问题的理解，我认为它更合适。