Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2011, 14:47
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Цитата:
this.onselectstart = function() {};
Правильнее
this.onselectstart = null;
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2011, 14:49
Gim Gim вне форума
Интересующийся
Отправить личное сообщение для Gim Посмотреть профиль Найти все сообщения от Gim
 
Регистрация: 27.06.2010
Сообщений: 19

Спасибо, первый пост обновил.
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2011, 16:09
Аватар для SlavaPav
Аспирант
Отправить личное сообщение для SlavaPav Посмотреть профиль Найти все сообщения от SlavaPav
 
Регистрация: 25.02.2010
Сообщений: 57

Можно улучшить и упростить (комментарии для тех кто плохо знает английский):
$('#charge, #volume').live('mousedown', function(event){
    var $element = $(this).find('div:last'),
        element = new Draggable($element);
    
    $element.disableSelection();
    element.drag(cursorPosition(event));
    
    $(document).bind('mousemove', function(event){
        element.drag(cursorPosition(event));
    });
    
    $(document).one('mouseup', function(){
        $element.enableSelection();
        $(this).unbind('mousemove');
    });
    
    // function позицияКурсора(событие) {...
    function cursorPosition(event) {
        return event.pageX - $element.width()/2;
    }
});

// function Перетаскиваемый($элемент) {...
function Draggable($element) {
    // function перетащить(позиция) {...
    this.drag = function(position) {
        var margin = 0;
        
        if (parentLeftEdge() < position) {
            if (position < parentRightEdge()) {
                margin = position - parentLeftEdge();
            } else {
                margin = parentRightEdge() - parentLeftEdge();
            }
        }
        $element.css('margin-left', margin+'px');
    };
    // function леваяГраницаРодителя() {...
    function parentLeftEdge() {
        return $element.parent().offset().left;
    }
    
    // function праваяГраницаРодителя() {...
    function parentRightEdge() {
        return parentLeftEdge() + $element.parent().width() - $element.width();
    }
}

Последний раз редактировалось SlavaPav, 24.07.2011 в 17:30.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите! "Не работает скрипт отсчета времени! Я нуб) Dobson Общие вопросы Javascript 4 28.05.2011 18:20
Помогите упростить скрипт. operatorr Ваши сайты и скрипты 6 05.01.2010 12:57
Помогите настроить скрипт раскрывающегося меню melomanfm Работа 6 10.08.2009 01:21
Люди, помогите адаптировать скрипт под Оперу KiLLk Opera, Safari и др. 1 01.06.2009 01:05