Question

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

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

感谢Beetroot-Beetroot的“收容：'父母'”我对这段代码感兴趣，实际上我想要它做出反应！除了一个大问题。图片只是跳到顶部或底部。没有平滑的滚动？如果我将“父母”改为“父母”，它会很好地滚动但是...当然遏制不再存在了。救命？：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" />

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

- 编辑 -

现在我要哭出来了 - 我已经在这个上设置了奖励和帮助我的工具，但我的网页上的访客帐户是： http://www.animize.de

在那里，您可以使用用户名：Gast和pw gast登录页面 - 点击名称（gast）右上角，您将看到配置文件 - 您可以在那里移动标题图片 - 当然它应该以另一种方式行事 - 帮助:(

Answer 1

尝试this fiddle。

我在drag事件中添加了一个if语句，用于检查图像的当前位置，如果条件返回true，则将当前顶部位置设置为ui.position.top，以便可拖动事件不会增加或在击中div的边界时减小顶部位置。这样你就可以保持div的位置属性。

Answer 2

伊万，

很难理解为什么代码应该在命名函数包装器中。除非需要打开/关闭可拖动性，否则只需在.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
                }
            );
        }
    });
});

Answer 3

请参阅this fiddle了解我的解决方案。我还处理了左右拖动，这对于你的情况目前来说并不是必需的，但如果你计划使用比它的父图像更大的图像，将来可能会有用。在你的情况下，你的图像与其父图像的宽度相同，所以我添加了一个threshold参数，让我们使用垂直拖动，而不会被正确的左边界和左边界取消。

我还为grab和grabbing游标添加了一些css，所以为了获得类似于拖动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');
});

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

具有保存位置的JQuery可拖动图像

5 个答案: