ورود

**Mr.Navid** · 93-9-28، 03:03 صبح

سلام
با یه سوال جدید اومدم
چجوری میشه یک شی رو در صفحه متحرک ساخت؟
نیاز به جی کوئری هست؟؟؟
میشه راهنمایی بفرمایید

**Mohammadinia** · 93-9-28، 07:50 صبح

با CSS3 هم امکانش وجود دارد.
از وب سایت w3schools استفاده کنید.
http://www.w3schools.com/cssref/tryit.as..._animation

**Mr.Navid**

خیلی ممنون
بله از اون لحاظ اطلاع دارم منظورم اینه که مثلا کاربر خودش اجسام رو حرکت بده
یه چیزی مث این صفحه
yon.ir/9rC9

البته خودم میدونم جی وئری هم داره منظورم اینه که روش چیه و اینکه میشه یه مثال ساده بدید

**Mr.Navid** · 93-9-30، 01:24 عصر

کسی راهش رو نمی دودنه؟؟؟؟!!

**Mr.AliReza** · 93-9-30، 06:05 عصر

(93-9-30، 01:24 عصر)happyman نوشته است: کسی راهش رو نمی دودنه؟؟؟؟!!

http://css-tricks.com/snippets/jquery/dr...jquery-ui/

موفق باشی.

**Mr.Navid** · 93-10-1، 12:59 صبح

ممنون،ولی:
1-حالا اگه بخوایم براش محدوده تعیین کنیم چی؟؟؟
مثلا بخوایم برای این کد یه کاری کنیم که تا یه جایی حرکت کنه

کد: 

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script>

$(document).ready(function (){

(function($) {

    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {

            var $el = this;

        } else {

            var $el = this.find(opt.handle);

        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {

            if(opt.handle === "") {

                var $drag = $(this).addClass('draggable');

            } else {

                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');

            }

            var z_idx = $drag.css('z-index'),

                drg_h = $drag.outerHeight(),

                drg_w = $drag.outerWidth(),

                pos_y = $drag.offset().top + drg_h - e.pageY,

                pos_x = $drag.offset().left + drg_w - e.pageX;

            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {

                $('.draggable').offset({

                    top:e.pageY + pos_y - drg_h,

                    left:e.pageX + pos_x - drg_w

                }).on("mouseup", function() {

                    $(this).removeClass('draggable').css('z-index', z_idx);

                });

            });

            e.preventDefault(); // disable selection

        }).on("mouseup", function() {

            if(opt.handle === "") {

                $(this).removeClass('draggable');

            } else {

                $(this).removeClass('active-handle').parent().removeClass('draggable');

            }

        });

    }

})(jQuery);

$('.myclass').drags();

});

</script>

<style>

.myclass{

  width: 100px;

  height: 100px;

  line-height: 100px;

  text-align: center;

  background: red;

  color: white;

  position: absolute;

  left: 20px;

  top: 20px;

}

body {

}

</style>

<body>

<div class="myclass">Drag me</div>        

</body>

2-بخوایم جاش عوض شده
مثلا جای این دو شکل باهم عوض شه

کد: 

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script>

$(document).ready(function (){

(function($) {

    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {

            var $el = this;

        } else {

            var $el = this.find(opt.handle);

        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {

            if(opt.handle === "") {

                var $drag = $(this).addClass('draggable');

            } else {

                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');

            }

            var z_idx = $drag.css('z-index'),

                drg_h = $drag.outerHeight(),

                drg_w = $drag.outerWidth(),

                pos_y = $drag.offset().top + drg_h - e.pageY,

                pos_x = $drag.offset().left + drg_w - e.pageX;

            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {

                $('.draggable').offset({

                    top:e.pageY + pos_y - drg_h,

                    left:e.pageX + pos_x - drg_w

                }).on("mouseup", function() {

                    $(this).removeClass('draggable').css('z-index', z_idx);

                });

            });

            e.preventDefault(); // disable selection

        }).on("mouseup", function() {

            if(opt.handle === "") {

                $(this).removeClass('draggable');

            } else {

                $(this).removeClass('active-handle').parent().removeClass('draggable');

            }

        });

    }

})(jQuery);

$('.myclass').drags();

$('.myclass1').drags();

});

</script>

<style>

.myclass{

  width: 100px;

  height: 100px;

  line-height: 100px;

  text-align: center;

  background: red;

  color: white;

  position: absolute;

  left: 20px;

  top: 20px;

}

.myclass1{

  width: 100px;

  height: 100px;

  line-height: 100px;

  text-align: center;

  background: red;

  color: white;

  position: absolute;

  left: 420px;

  top: 20px;

}

body {

}

</style>

<body>

<div class="myclass">Drag me</div>

<div class="myclass1">Drag me</div>                

</body>

**Mr.AliReza** · 93-10-1، 04:56 عصر

برای این کار میتونید در این قسمت از کد ، یعنی در رویداد onMouseUp :

کد: 

}).on("mouseup", function() {

    $(this).removeClass('draggable').css('z-index', z_idx);

});

یک دستور if بگذارید تا چک کنه که اگر X و Y از یه محدوده ای بیشتر شد ، به مقعیت دیگه منتقل بشه.

**Mr.Navid** · 93-10-1، 05:22 عصر

من خودم از این روش استفاده کردم ولی جواب نداد

کد: 

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script>

$(document).ready(function (){

(function($) {

    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {

            var $el = this;

        } else {

            var $el = this.find(opt.handle);

        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {

            if(opt.handle === "") {

                var $drag = $(this).addClass('draggable');

            } else {

                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');

            }

            var z_idx = $drag.css('z-index'),

                drg_h = $drag.outerHeight(),

                drg_w = $drag.outerWidth(),

                pos_y = $drag.offset().top + drg_h - e.pageY,

                pos_x = $drag.offset().left + drg_w - e.pageX;

            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {

                $('.draggable').offset({

                    top:e.pageY + pos_y - drg_h,

                    left:e.pageX + pos_x - drg_w

                }).on("mouseup", function() {

                    $(this).removeClass('draggable').css('z-index', z_idx);

                });

            });

            e.preventDefault(); // disable selection

        }).on("mouseup", function() {

            if(opt.handle === "") {

                $(this).removeClass('draggable');

            } else {

                $(this).removeClass('active-handle').parent().removeClass('draggable');

            }

        });

    }

})(jQuery);

$('.myclass').drags();

});

</script>

<script>

x=documetn.getElementById('1')

if (x.style.margin>30px){

x.style.margin="30px";

}

</script>

<style>

.myclass{

  width: 100px;

  height: 100px;

  line-height: 100px;

  text-align: center;

  background: red;

  color: white;

  position: absolute;

  left: 20px;

  top: 20px;

}

body {

}

</style>

<body>

<div class="myclass" id="1">Drag me</div>        

</body>

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار

بک لینک