带有 jquery ui 可拖动的无限可拖动元素
[英]infinite draggable element with jquery ui draggable
问题描述
I'm trying to create an element that grows and shrink while dragging.
我正在尝试创建一个在拖动时增长和缩小的元素。 This works by dragging up and to the right.这是通过向上和向右拖动来实现的。 Only it doesn't work by dragging to the left and bottom.只有拖动到左侧和底部不起作用。
For more details please see the code snippet.有关更多详细信息，请参阅代码片段。
var move = { drag: function () { main = $('main'); main.draggable({ drag: function (event, ui) { $(this).css({ 'padding-right': Math.abs(ui.position.left), 'padding-bottom': Math.abs(ui.position.top), }); }, scroll: false, }); } } move.drag(); body { margin:0; overflow:hidden } main { width:100vw; height:100vh; background:url('https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg'); }
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <main> </main> </body>
2 个解决方案
解决方案1
2 2019-02-21 14:49:49
After a little more research I found out that I could also do this with background-position.经过更多的研究，我发现我也可以使用背景位置来做到这一点。 So I'm using this as solution now.所以我现在使用它作为解决方案。 By dragging the green div.通过拖动绿色 div。
var move = { drag: function () { main = $('main'); $('div').draggable({ drag: function (event, ui) { main.css({ 'background-position':ui.position.left + 'px ' + ui.position.top + 'px', }); }, scroll: false, }); } } move.drag();
body { margin:0; overflow:hidden } main { width:100vw; height:100vh; background:url('https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg'); } div { width:59px; height:59px; background:green; margin:124px; position:absolute; }
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <main> <div> </div> </main> </body>
解决方案2
0 2019-02-21 14:29:13
the below solution breaks a little bit the animation but did a contentious background .下面的解决方案打破了一点动画，但做了一个有争议的背景。
your probleme is that the top and left are edited after drag finished so I tried to edit those by using timeout function ,您的问题是拖动完成后编辑顶部和左侧，所以我尝试使用超时功能编辑它们，
See below snippet:见下面的片段：
let newtop = newleft = 0; let dataMain; var move = { drag: function() { main = $('main'); main.draggable({ drag: function(event, ui) { newtop = Math.abs(ui.position.top); newleft = Math.abs(ui.position.left); $(this).css({ 'padding-right': newleft, 'padding-bottom': newtop, }); setTimeout(function(){ main.css({ 'top':-newtop, 'left':-newleft }) },1); }, scroll: false, }); } } move.drag();
body { margin: 0; overflow: hidden } main { width: 100vw; height: 100vh; background: url('https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg'); background-repeat: repeat; }
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <main> </main> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.