Показать сообщение отдельно
  #1 (permalink)  
Старый 23.07.2011, 14:27
Gim Gim вне форума
Интересующийся
Отправить личное сообщение для Gim Посмотреть профиль Найти все сообщения от Gim
 
Регистрация: 27.06.2010
Сообщений: 19

Написал скрипт, помогите упростить.
Drag&Drop скрипт. Подскажите в каких местах можно упростить.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
	disableSelection : function() {
		this.each(function() {
			jQuery(this).css('-moz-user-select', 'none');
			this.onselectstart = function() {
				return false;
			};
			this.unselectable = "on";
		});
	},
	enableSelection : function() {
		this.each(function() {
			jQuery(this).css('-moz-user-select', 'auto');
			this.onselectstart = function() {};
			this.unselectable = "off";
		});
	}
});
$('#charge, #volume').live('mousedown', function(event){
	element = $(this).find('div:last');
	$(element).disableSelection();
	father = element.parent();
	cursor = event.pageX - element.width()/2;
	drag(event);
	function drag(event) {
		cursor = event.pageX - element.width()/2;
		left = father.offset().left;
		right = left + father.width() - element.width();
		if(left < cursor) {
			if(cursor < right) {
				margin = cursor - left;
			} else {
				margin = right - left;
			}
		} else {
			margin = 0;
		}
			element.css('margin-left', margin+'px');
	};
	$(document).bind('mousemove', drag);
	$(document).one('mouseup', function(){
		$(element).enableSelection();
		$(this).unbind('mousemove');
	});
});
</script>
<style>
#charge, #volume {
	margin-bottom: 5px;
	background: #eee;
	width: 200px;
	height: 5px;
}
#charge div {
	background: #ccc;
	width: 100px;
	height: 5px;
}
#charge div div, #volume div {
	background: #000;
	height: 5px;
	width: 10px;
}
</style>
<div id="charge"><div><div></div></div></div>
<div id="volume"><div></div></div>

Последний раз редактировалось Gim, 23.07.2011 в 15:42.
Ответить с цитированием