Question

我在将可拖动图像放在前面时遇到问题，当我的容器没有溢出样式时，我没有问题但我需要我的容器有溢出-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 for draggable image：

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

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

 stack: ".draggable",

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

为清楚起见，请参阅下面的问题图片：

enter image description here

这是我拖动图片时想要的结果：

enter image description here

这是我的容器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

带有draggable定位元素的Jquery relative并不总是很容易使用。在您的情况下，您可能希望查看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，我认为这会更合适。

如何使可拖动图像始终出现在溢出容器内部

1 个答案: