好吧,它变得很尴尬,已经搜索并尝试了大约 5 个小时,我只是在原地打转......
场景很简单:它是用户个人资料的标题图像,可以将其拖到某个位置,然后将图像的顶部位置保存到数据库中。
多亏了 Beetroot-Beetroot 的“containment: 'parent'”,我才开始使用这段代码,它实际上按照我想要的方式使用react!除了一个大问题。图片只是跳到顶部或底部。有没有流畅的滚动?如果我将“父级”更改为 -“父级”,它会很好地滚动,但是......当然不再存在遏制了。帮助? :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" />
正如我所说,数小时的谷歌搜索没有给出任何结果 - 如果我不保存结果,它会工作得很好,但是哦,好吧......
-- 编辑--
现在我快要哭出来了 -.- 我已经在这个和帮助我的工具上设置了一个赏金 ain jsfiddle 但我网页上的访客帐户是: http://www.animize.de
在那里您可以使用用户名登录到页面:Gast 和 pw gast - 单击名称 (gast) 的右上角,您将看到个人资料 - 在那里您可以移动标题图片 - 当然它应该以另一种方式表现 - 帮助 :(
最佳答案
尝试 this fiddle .
我在 drag
事件中添加了一个 if 语句,该事件检查图像的当前位置,并在满足条件时将当前顶部位置设置为 ui.position.top
返回 true,因此可拖动事件在触及 div 的边界时不会增加或减少顶部位置。这样您就可以保留 div 的位置属性。
关于具有保存位置的 JQuery 可拖动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12575573/