保存位置的JQuery可拖动图像

Posted 2023-05-08

【中文标题】保存位置的JQuery可拖动图像

【英文标题】：JQuery draggable image with saved position

【发布时间】：2012-09-16 12:50:30

【问题描述】：

好吧，它变得越来越尴尬，已经搜索并尝试了大约 5 个小时，我只是在兜圈子......

场景很简单：它是用户个人资料的标题图像，可以将其拖到某个位置，然后将图像的顶部位置保存到数据库中。

感谢 Beetroot-Beetroot 的“containment: 'parent'”，我终于明白了这段代码，它实际上会按照我的意愿做出反应！除了一个大问题。图片只是跳到顶部或底部。有没有平滑滚动？如果我将“父级”更改为-“父级”，它会很好地滚动，但是......当然不再存在遏制了。帮助？ :D

JS

$(function()
    $(".headerimage").css('cursor','s-resize');
    $(".headerimage").draggable( containment: 'parent', scroll: false, axis: "y",    stop: function(event, ui) 
            var data = "profileheaderposition="+ui.position.top;
            var destination = "/modules/users/profile/save.php";
            get_data(data, destination, function(test)
                notice(test);
            );
        
    );                 
);

最后但并非最不重要的是，标题是这样包含的：

<div class="<?php if ($user->id == $profileuser->id) echo "changer"; ?> ui-corner-all" id="profileheader" style="overflow: hidden; width: 650px; height: 260px; position:relative;">
<?php if($profile->profileheader)
    $size = getimagesize($profile->profileheader);
?>
<img id="" class="draggable headerimage" style="position: absolute; top: <?php echo $profile->profileheaderposition; ?>px;" src="<?php echo $profile->profileheader; ?>"   />

正如我所说，数小时的谷歌搜索没有给出任何结果 - 如果我不保存结果，它会工作得很好，但是哦，好吧......

-- 编辑--

现在我要大喊大叫了-.-我已经为此设置了赏金以及帮助我​​使用 jsfiddle 的工具，但我的网页上有一个访客帐户： http://www.animize.de

在那里，您可以使用用户名登录页面：Gast 和 pw gast - 单击名称（gast）的右上角，您将看到个人资料 - 在那里您可以移动标题图片 - 当然它应该以另一种方式表现 - 帮助:(

【问题讨论】：

jsfiddle.net/UAgDA/25 这里是一些解释行为的运行代码的小提琴！

很抱歉问这个问题.. 你的版本与 parent: 'parent' 有什么问题？我可以流畅地看到滚动图像..它失败了什么？

如果我想滚动它，它会“跳”到图像的底部或顶部（至少在 chrome 中） - 或 / 如果我通过添加一个“-”它按预期工作-只是它不再有遏制-意思是：我甚至可以将图像滚动到屏幕之外:(

抱歉无法理解，您的图像已经比您显示它的矩形大，所以每当您移动（=滚动）图像时，它都会超出屏幕（意味着超出矩形）..

我们的目标是在他们的时间轴上建立一个像 facebook 这样的系统，或者在他们的个人资料上建立一个像 google+ 这样的系统，以消除一些误解

【参考方案1】：

试试this fiddle。

我在drag 事件中添加了一个 if 语句，它检查图像的当前位置，如果条件返回 true，则将当前顶部位置设置为 ui.position.top，因此可拖动事件不会增加或减少顶部位置同时达到 div 的边界。这样您就可以保留 div 的位置属性。

【讨论】：

工作得很好，按照我想要的方式 - 感谢所有的鱼

【参考方案2】：

伊万，

很难理解为什么代码应该在命名函数包装器中。除非需要打开/关闭可拖动性，否则只需在 $(function()...); 结构中调用一次 .draggable()。

也很难理解为什么需要将静态数据从 php 写入 javascript。 javascript/jQuery 不应该通过查询 DOM 自行发现可拖动图像，即使这样也不清楚为什么这可能是必要的。

我希望看到这样的东西：

$(function() 
    $(".headerimage").draggable(
        containment: 'parent',
        scroll: false,
        axis: "y",
        stop: function(event, ui) 
            $.ajax(
                url: "/modules/users/profile/save.php",
                data: "profileheaderposition=" + ui.position.top,
                success: function() 
                    //do something here to indicate that the new position has been successfully saved
                
            );
        
    );
);

【讨论】：

那个收容措施：“父母”，似乎在发挥作用！谢谢你，但是它现在有一个有趣的行为，在拖动它时会跳转到图片的顶部或底部？ （没有平滑滚动）？

Ivan，看看你能不能设置一个 fiddle 有同样的症状，然后在这里发个链接。

【参考方案3】：

请参阅this fiddle 了解我的解决方案。我还处理了左右拖动，目前这对您的情况不是必需的，但如果您计划使用大于其父级的图像，将来可能会很有用。在您的情况下，您的图像与其父图像的宽度相同，因此我添加了一个 threshold 参数以允许使用垂直拖动，而不会因左右边界被击中而取消。

我还为grab 和grabbing 光标添加了一些css，以便获得类似于拖动pdf时的光标效果，不幸的是，在某些浏览器（IE和chrome in我的测试）但 Firefox 显示它们是正确的。

在此处粘贴我的代码以防止将来出现损坏的链接。

html：

<br><br><br><br><br><br><br>
<div class="ui-widget-content" style="padding:10px;">

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;">
    <img style="position: absolute;" class="headerimage ui-corner-all" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" />
    </div>

</div>

CSS：

.headerimage 
    cursor:hand;
    cursor:grab;
    cursor:-moz-grab;
    cursor:-webkit-grab;

.grabbing 
  cursor:grabbing !important;
  cursor:-moz-grabbing !important;
  cursor:-webkit-grabbing !important;

JAVASCRIPT：

var container = $(".picturecontainer");
var childimage = $(".headerimage");

childimage.draggable(  scroll: false, start:function(event,ui) 
                  childimage.addClass('grabbing');
     , stop: function(event, ui) 
                  childimage.removeClass('grabbing');
     ,drag: function(event,ui) 
        //left and right threshold
        //to ease draggin images that have same width as container
        threshold = 20;//pixels
        ltop = childimage.offset().top -1 > container.offset().top;
        lbottom = childimage.offset().top + childimage[0].offsetHeight 
                  <= container.offset().top + container[0].offsetHeight;
        lleft = childimage.offset().left > container.offset().left + threshold;
        lright = childimage.offset().left + childimage[0].offsetWidth <
                container.offset().left + container[0].offsetWidth - threshold;
        if (ltop || lbottom || lleft || lright) 
            $(this).data("draggable").cancel();
            if (ltop) 
                 $(this).offset( top: $(this).parent().offset().top+1);
             else if (lbottom) 
                newtop = container.offset().top + container[0].offsetHeight 
                         - childimage[0].offsetHeight;
                $(this).offset( top: newtop+1);
             else if (lleft) 
                newleft = container.offset().left;
                $(this).offset( left: newleft);
             else if (lright)                      
                newleft = container.offset().left + container[0].offsetWidth;
                          - childimage[0].offsetWidth;
                $(this).offset( left: newleft);
            
         
     
).parent().bind('mouseout',function() 
     childimage.trigger('mouseup');
);

【讨论】：

这是一段不错的代码，尽管我更喜欢 QQpings 解决方案，因为它既漂亮又流畅。即使那样仍然感谢您的帮助:)。

【参考方案4】：

我在我的项目中使用此代码，它工作正常。我使用了 QQping 的解决方案，我只是做了一个小改动，使图像也可以左右移动。希望对你有帮助。。

http://jsfiddle.net/UAgDA/266/

//Moving left and right
if(ui.position.left >= 0)

    ui.position.left = 0;
                                     
else if(ui.position.left <= x1 - x2)
    
    ui.position.left = x1 - x2;

干杯

【讨论】：

这不是一个完整的答案。它根本没有解决保存位置的问题。它几乎不包括将移动限制在某个区域，但不包括如何开始或结束移动。

Bootstrap 正在覆盖此代码，因此只有从 (Top to bottom) 和 (bottom to Top) 发生滚动，而不是从左到右。有人可以帮忙吗！

【参考方案5】：

我认为您不需要将其包含在 parent 内，否则您将无法将其向上拖动到 parent 边界之外

另外，jQuery ui 在两个坐标内提供containment。

试试这个代码，

HTML

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;">
    <img class="headerimage" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" />  
</div>

JS

$(function() 
    var img = $(".headerimage");
    img.css('cursor', 's-resize');
    var x1 = img.parent().width() - img.width();
    var y1 = img.parent().height() - img.height();
    $(".headerimage").draggable(
        containment: [x1,y1,0,0],
        scroll: false,
        axis: "y",
        stop: function(event, ui) 

        
    );
);​

Demo

【讨论】：

实际上我之前有几乎相同的代码 - 但它不起作用。这与我的行为相同。现在我可以将图片移动到底部边框上，以便留下一个空白区域 - 我不能将它向下移动到我应该的位置。这可能与 div 的位置有关，但它们无法更改！ animize.de/users/profile/1 这是我们正在谈论的页面。

对不起，我没有得到你的评论。你能改写吗？

jsfiddle.net/Zf2vk/8 行为几乎就像这里一样（当然没有-150） - 正如我所说，我猜这是关于 div 的定位，但我似乎无法猜测如何避免它。

因此，您想将图片向下移动并保留图像顶部的空白。对吧？

抱歉，现在是一大早，我想我的英语现在有点生疏了...我希望它的行为与您的演示一样 - 但它的行为与我添加的演示一样。 （是的，复制了您的演示，在我正在使用的设计中尝试了它 - 因此我认为它与设计的绝对和相对定位有关，而不仅仅是蜜蜂问题，但另一方面我可以'不明白为什么它应该像 img 在容器中一样，所以它的行为方式应该与您在演示中的方式一样 - 正如我所说，我对这个功能有点生气......）