اسکرول و دراگ کردن [بایگانی]

olampiad

سه شنبه 21 مرداد 1393, 21:46 عصر

سلام و خسته نباشید ب اساتید عزی
به این کد های من ی نگا بندازید
میشه اون رو یکبار روی سیستم خودتون اجرا کنید.
حالا ب این تصویر ی نگا بندازید
http://s5.picofile.com/file/8134784518/sdfgh.png
من ب دلیل اینکه دایو های زیادی در داخل دایو کرم دارم بهش اسکرول دادم تا مرتب تر باشد و از دایو پدر بیرون نزند.
حالا وقتی میخوام عمل دراگ را انجام بدهم.دایوی را که دراگ کرده ام از دایو پدر بیرون نمی آید و در آنجا می ماند.
حال برای حل این مشکل چیکار کنم.
آیا برای این کار راه حلی وجود دارد یا باید اسکرول را غیر فعال کنم.
ممنون بابت راهنمایی ها

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {

$('.tt').draggable({
revert:true
})

$('#two').droppable({

})

});
</script>

<style type="text/css">

#one{
float:left;
width:400px;
overflow:scroll;
height:500px;
background:#FFC;
}

#two{
float:right;
width:200px;
height:500px;
background:#F90;
}

.tt{
float:left;
width:250px;
height:40px;
background:#FC0;
margin:4px;
text-align:center;

}

</style>

</head>
<body>

<div id="one">
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
</div>

<div id="two">

</div>

</body>
</html>

olampiad

چهارشنبه 22 مرداد 1393, 23:42 عصر

سلام و خسته نباشید
من کد روی کد بالا کار کردم و اون رو ب این صورت در آوردم.
الآن کمکم می کنید.
میشه وقتی که از دایو one دور شد بازم مرتب بشه.
ولی وقتی از دایو one دور میشه بازم ترتیب خودشو بهم میزنه

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {

$('.tt').draggable({
revert:true,
drag:function(){

var ff=this.offsetLeft;
if(ff>200){
$('#one').css({'overflow':'inherit'});
}else{
$('#one').css({'overflow':'scroll'});
}

$('#two').text(ff);

}
})

$('#two').droppable({

})

$('#one').css('overflow','visible');

$('#one').hover(function(){
$(this).css('overflow','scroll');
})

});
</script>

<style type="text/css">

#one{
float:left;
width:400px;
overflow:scroll;
height:500px;
background:#FFC;
}

#two{
float:right;
width:200px;
height:500px;
background:#F90;
}

.tt{
float:left;
width:250px;
height:40px;
background:#FC0;
margin:4px;
text-align:center;

}

</style>

</head>
<body>

<div id="one">
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
<div class="tt">one</div>
</div>

<div id="two">

</div>

</body>
</html>

reza_ali202000

یک شنبه 23 شهریور 1393, 14:02 عصر

ای بابا حداقل سورسشو بزار با فولدر js تا ببینیم مشکلش چی هس!