Jump to content
  • 0

drag and drop (jquery ui)


VeniVidiVici
 Share

Question

Не получается сделать одну вещицу(( 

Использую jquery ui плагины (Draggable и Sortable) для перемещения блоков .

Суть:

Есть блок (id="draggable"), который можно клонировать и перетягивать в ячейки таблицы.

Важно, чтобы в 1 ячейку можно было перенести только 1 блок(т.е. в пустую ячейку). С этим проблем нет.

 

Блоки, которые уже находятся в ячейках таблицы, тоже можно переносить в пустые ячейки... но к сожалению, они добавляются и в занятые ячейки(такого быть не должно)((

Никак не могу исправить эту проблему, помогите пожалуйста, 3 день мучаюсь:facepalmxd:

Вот код

 

 

Edited by VeniVidiVici
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Vitalya T
      Добрый день. Хочу совместить Jquery UI slider и ajax галерею.
      Проблема в том, что при изменении рейнджа больше чем на один шаг, изображения не проматываются адекватно. При изменении диапазона на один шаг, скрипт работает нормально.
      Видео:
      http://screencast.com/t/loDxRlNEncq
      Сэмпл кода в котором это обрабатывается:
      var ScrollToright= function (Steps){ console.log ("Steps!!!!!!!!! "+Steps); th.find('li').stop(true, true) var next_li = th.find('li.showed:last').next() if(next_li.length!=1) return; var all_li = th.find('li.showed:not(:first)') var first_li = th.find('li.showed:first'); var additionalCollection = th.find('li.showed:first'); var trueIndexli = th.find('li.showed:first').index()-1; var next_li_add; console.log ("trueIndexli "+trueIndexli); /*for ( var i = 0; i < Steps; i++ ) { additionalCollection = additionalCollection.add(th.find('li.showed').eq(i)); }*/ for ( var i = 0; i < Steps; i++ ) { trueIndexli= trueIndexli+i; additionalCollection = additionalCollection.add(th.find('li').eq(trueIndexli)); } //additionalCollection.css('background','red'); //th.find('li.showed').eq(0).css('background','red'); //console.log("additionalCollection "+additionalCollection); //additionalCollection.css('background','red'); if (Steps>1){ first_li = additionalCollection; all_li = th.find('li').not(additionalCollection); next_li_add = additionalCollection.last().next(); next_li = next_li_add; } if (Steps>4) { all_li = additionalCollection.nextAll(); } next_li.addClass('showed').css('opacity', '0') var left = $(first_li).width()+20 first_li.animate( { 'left': '-'+left+'px', 'opacity': '0' }, __this__.speed, function(){ __this__.normalize($(this)) $(this).removeClass('showed'); __this__.check_nav(th) __this__.check_count(th); } ); all_li.animate( { 'left': '-'+left+'px' }, __this__.speed, function(){ __this__.normalize($(this)) } ); next_li.animate( { 'left': '-'+left+'px', 'opacity': '1' }, __this__.speed, function(){ __this__.normalize($(this)) } ); __this__.ajax_li(th, "right") //PUSH BACK totalCountinThisLoad= th.find("li").size(); if (totalCountinThisLoad > newcount1) newcount1 += totalCountinThisLoad-newcount; totalCountShow=th.find("li.showed").size(); totalCountLeft=totalCountinThisLoad-totalCountShow; // if (totalCountShow>5) totalCountShow = 5; totalCountLeft=totalCountinThisLoad-totalCountShow; Maxrange=(totalCountinThisLoad-totalCountShow+1)*10; $( ".slider1" ).slider( "option", "max", Maxrange); $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Steps); if ( ( $( ".slider1" ).slider("value") == $( ".slider1" ).slider( "option", "max") ) && ( th.find('li.showed:last').nextAll("li").size()>0) ) { var remain = th.find('li.showed:last').nextAll("li").size(); $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - (remain*10) ); } }var ScrollToLeft = function(Steps) { var stepback = Math.abs(Steps); console.log ("Steps!!!!!!!!! "+stepback); th.find('li').stop(true, true) var next_li = th.find('li.showed:first').prev() if(next_li.length!=1) return; var last_li = th.find('li.showed:last') var additionalCollection = th.find('li.showed:last'); var trueindex = last_li.index(); var totalShowed = th.find('li.showed').length-1; //th.find('li.showed').eq(totalShowed).css('background','black'); console.log("totalShowed "+totalShowed); console.log("trueindex "+trueindex); for ( var i = 0; i <stepback; i++ ) { if (i<=4){ totalShowed = totalShowed-i; additionalCollection = additionalCollection.add(th.find('li.showed').eq(totalShowed)); } } if (stepback>1) last_li = additionalCollection; //additionalCollection.css('background','green'); var left = $(last_li).width()+20 var all_li = th.find('li.showed:not(:last)') next_li.addClass('showed').css('opacity', '0').css('left','-'+left+'px') all_li.css('left','-'+left+'px') last_li.css('left','-'+left+'px') last_li.animate( { 'left': 0+'px', 'opacity': '0' }, __this__.speed, function(){ __this__.normalize($(this)) $(this).removeClass('showed'); __this__.check_nav(th) __this__.check_count(th); } ); all_li.animate( { 'left': 0+'px' }, __this__.speed, function(){ __this__.normalize($(this))} ); next_li.animate( { 'left': 0+'px', 'opacity': '1' }, __this__.speed, function(){ __this__.normalize($(this))} ); __this__.ajax_li(th, "left") //PUSH BACK $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") - 10); totalCountinThisLoad= th.find("li").size(); if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount; totalCountShow=th.find("li.showed").size(); totalCountLeft=totalCountinThisLoad-totalCountShow; totalCountLeft=totalCountinThisLoad-totalCountShow; $( ".slider1" ).slider( "option", "max", Maxrange); Prevli = th.find('li.showed:first').prevAll("li").size(); if ( ( $( ".slider1" ).slider("value") == 0 ) && ( th.find('li.showed:first').prevAll("li").size()>0 ) ) { $( ".slider1" ).slider("value", $( ".slider1" ).slider("value") + Prevli*10); }}th.find( ".slider1" ).bind( "slide", function(event, ui){ totalCountinThisLoad= th.find("li").size(); if (totalCountinThisLoad > newcount) newcount += totalCountinThisLoad-newcount; totalCountShow=th.find("li.showed").size(); totalCountLeft=totalCountinThisLoad-totalCountShow; totalCountLeft=totalCountinThisLoad-totalCountShow; Maxrange=(totalCountinThisLoad-totalCountShow+1)*10; $( ".slider1" ).slider( "option", "max", Maxrange); deltaValueStep = (ui.value-ValueOldOnSlide)/10; //console.log("deltaValueSte "+deltaValueStep); if ( ui.value>ValueOldOnSlide){ // console.log("step"+step); //console.log("Its scroll down") ScrollToright(deltaValueStep); } if ( ui.value<ValueOldOnSlide){ //console.log("Its scroll up") ScrollToLeft(deltaValueStep); } }); Скрипт целиком: http://pastebin.com/LdqPPS7K
       
       
       
       
      Ссылка на сайт, где можно попробовать, как работает скрипт: http://testing.site-services.ru/
    • By npofopr
      Как сделать, чтобы draggable элемент падал всегда в конец списка?
      Вот например, код из примера http://jsfiddle.net/npofopr/TmX7h/
      Элемент в конец конечно падает, но всё же его можно протиснуть и между строчками. Можно ли как-то отправлять его в конец, при любых случаях?
      Здесь все как то очень просто получается http://jsfiddle.net/npofopr/8snSf/1476/ и все работает. Но у себя тоже самое не получается повторить. Еще и по 2 штуки добавляет.
      //offtop: а у вас работают уведомления о новых, созданных темах?
    • By deadrash
      Доброго дня! Помощи прошу я по порьбе с ie проклятущем.
      В общем, использую jQuery ui .placeholder() и всё замечательно, но вот ослик думает что плейсехолдер - это значения полей, во первых он отправляет плейсехолдер при сабминте, а во вторых Javascript который используется на страничке и получает значения полей, получает как значения этот самый плейсехолдер.
      В общем мне нужен совет как бороться с ie. В общем то придумать можно много чего, но мне интересно, может есть какой вменяемый вариант.
      Или может быть я просто неправильно использую jQuery ui .placeholder ? Что-то мне чуйка подсказывает что не должно быть такой проблемы, это же всётаки jQuery, он должен сам понимать как бороться с ie.
      Посмотреть можно тут: http://taxibezprobok.myjino.ru/zakaz-online.html
      Сам placeholder находится тут: http://taxibezprobok.myjino.ru/js/order/sets.js
    • By cyklop77
      в jquery ui есть возможность преобразовать радиокнопки в меню, у которого крайние кнопки закруглены. помогите пожалуйста применить эту же технику к <a> или <li>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy