Блог

Главная - Вопросы по программированию - анимация jquery вертикально вверх

анимация jquery вертикально вверх

#jquery #jquery-ui #jquery-ui-draggable

#jquery #jquery-пользовательский интерфейс #jquery-ui-перетаскиваемый

Вопрос:

Я пытаюсь добавить перетаскиваемый элемент на свою страницу, используя перетаскиваемый плагин пользовательского интерфейса jquery ( http://jqueryui.com/demos/draggable / ). На данный момент у меня есть это:

 $("#makeMeDraggable").draggable({ axis: "y"});

Я уже пробовал:

 $("#makeMeDraggable").draggable({ axis: "y",  limit: {top: 10, bottom: 550}});

Что мне нужно, так это разрешить перетаскивание только по вертикали — но только вверх (запрещая перетаскивание вниз).

Комментарии:

1. Что ты здесь пытаешься сделать? Вы хотите, чтобы элемент можно было перетаскивать только в пределах текущего пространства окна или что? Я также предполагаю, что это плагин. Можете ли вы дать ссылку на страницу плагина, чтобы мы знали, что это за плагин?

2. JamWaffles то, что я пытался сделать, — это эффект, который опубликовал Джеймс, то есть просто разрешить перетаскивание «вертикально вверх».

Ответ №1:

попробуйте этот код:

 $("#makeMeDraggable").draggable({ axis: "y"});

var lastYPosition = null;

$("#makeMeDraggable").draggable({
   drag: function(event, ui) {

       // set with the initial y position
       if(lastYPosition === null) {
           lastYPosition = ui.originalPosition.top;           
       }

       // don't do the drag if the new y position is larger than the old one
       if(ui.position.top > lastYPosition) {
           return false;   
       }

       // update the last y position with current value
       // so we can check against it next time
       lastYPosition = ui.position.top;
   }
});

И вот рабочий пример: (протестировано в Chrome и Safari)
http://jsfiddle.net/jameszaghini/s4vfX /

Комментарии:

1. идеальный Джеймс. Большое вам спасибо 🙂

Метки: