9

好的，它变得很尴尬，已经搜索并尝试了大约 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);
            });
        }
    });                 
});

所以最后但并非最不重要的 Header 是这样包含的：

<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）的右上角，您将看到配置文件 - 在那里您可以移动标题图片 - 当然它应该表现以另一种方式 - 帮助:(

4

5 回答 5

11

试试这个小提琴。

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

于 2012-09-27T21:48:20.920 回答
3

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

grab我还添加了一些用于和光标的css grabbing，因此要获得类似于拖动 pdf 时的光标效果，不幸的是，在某些浏览器（IE 和我的测试中的 chrome）中，对这种光标的支持有些损坏，但 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');
});
于 2012-09-28T14:38:30.923 回答
3

伊万，

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

也很难理解为什么需要将静态数据从 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
                }
            );
        }
    });
});
于 2012-09-25T03:48:25.910 回答
2

我在我的项目中使用此代码，它工作正常。我使用了 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;
}

干杯

于 2014-03-14T01:04:27.450 回答
1

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

或者，jQuery ui在两个坐标内提供了包容。

试试这个代码，

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) {

        }
    });
});​

演示

于 2012-09-27T05:06:39.447 回答