保存位置的JQuery可拖动图像

Question

好吧，它变得越来越尴尬，已经搜索并尝试了大约 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; ?>" alt="profileheader" width="650" />

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

-- 编辑--

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

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

Answer 1

试试this fiddle。

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

Answer 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
                }
            );
        }
    });
});

Answer 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');
});

Answer 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;
}

干杯

Answer 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