jQuery可拖动图像与保存的位置 [英] JQuery draggable image with saved position
问题描述
确定它变得尴尬，已经搜索并尝试了大约5个小时，我只是在圈子中运行...
OK it's getting awkward, already searched and tried for about 5 hours and I'm just running in circles...
这个场景很容易：图像的用户配置文件，它可以被拖动到一个位置，然后图像的顶部位置保存到DB。
The scenario is easy: It's the header image of a user profile, it can be dragged into an position and then the top position of the image get's saved into a DB.
感谢Beetroot-Beetroot的containment：'parent'我来到这段代码，它实际上是我想要的反应！除了一个大问题。图片只是跳到顶部或底部。没有平滑滚动？如果我将父改为明显，它滚动得很好，但...遏制当然不再有了。帮帮我？ ：D
Thanks to Beetroot-Beetroot's "containment: 'parent'" I am down to this piece of code, which actually reacts as I want it to! Except for one big problem. The Picture just jumps either to the top or the bottom. There is no smooth scrolling? If I change the 'parent' to -'parent' it scrolls nicely but... the containment of course isn't there anymore. Help? :D
The 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);
});
}
});
});
因此，最后但并非最不重要的是，标题包含如下：
So and last but not least the Header is included like that:
<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" />
正如我说的，谷歌搜索的时间没有给出任何结果 - 如果我不保存结果它会工作很好，但很好...
As I said hours of googling weren't giving any results - and if i wouldn't save the results it would work just fine but oh well...
- 编辑 -
我已经设置了一个赏金在这一个和工具帮助我ain jsfiddle但在我的网页上的客人帐户是：
http://www.animize.de
Right now I am about to cry out -.- I've set up a bounty on this one and the tools for helping me ain jsfiddle but an guest account on my webpage which is: http://www.animize.de
您可以登录到用户名为：Gast和pw的页面gast - 点击右上角的名称（gast），你会看到配置文件 - 你可以移动headerpicture - 当然它应该采取另一种方式，而不是它 - 帮助：（
There you can log on to the page with the Username: Gast and the pw gast - Click on the top right on the name (gast) and you'll see the profile - there you can move the headerpicture - and of course it should behave in another way than it does - help :(
推荐答案
尝试这个小提琴。
我在 drag 事件中添加了一个if语句，它检查图像的当前位置，并将当前顶部位置设置为 ui.position.top 如果条件返回true，则draggable事件不会增加或减少顶部位置，而打破div的边界。这样你可以保持div的位置属性。
I added an if-statement to the drag event which checks the current positioning of the image and sets the current top position into ui.position.top if the condition returns true so the draggable event does not increase or decrease the top position while hitting the boundaries of the div. This way you can keep the position properties of your div's.
这篇关于jQuery可拖动图像与保存的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
