Пользовательский интерфейс jQuery можно перетаскивать на меньшие - PullRequest
Новая
       16

Пользовательский интерфейс jQuery можно перетаскивать на меньшие

4 голосов
/ 30 марта 2010

Я использую это http://jqueryui.com/demos/droppable/

Но у меня проблема с перетаскиванием на буксирный объект, который меньше перетаскиваемого.
Он не будет падать на предмет сброса, но в верхнем левом углу предмета.

альтернативный текст http://yart.com.au/junk/draggableProblem.jpg

Есть ли способ обойти это?

Вот код, спасибо. 

  $('.draggable').draggable({
    revert: 'invalid',
    revertDuration: 500,
    appendTo: 'body',

    helper: function(event, ui) {
      return $(this).clone().appendTo('body').css('zIndex', 5).show();
    },
    drag: function(event, ui) {
      $(ui.helper).removeClass("enlarge");
      $(ui.helper).addClass("thumbnail");
      $(this).hide();
    },
    stop: function(event, ui) {
      $(this).show();
      //$(this).addClass("enlarge");
      if ($(this).parent().hasClass("imageContainer")) {
        $(this).addClass("thumbnail");
      }
      else {
        $(this).addClass("enlarge");
      }
    },
    //cursorAt: { top: 30, left: 40 },
    delay: 100,
    refreshPositions: true
  });


  $('.imageContainer').droppable({
    accept: '.draggable',
    drop: function(event, ui) {
      ui.draggable.css({
        "position": "relative",
        "left": "0px",
        "top": "0px"
      });
      if ($(this).children().length == 0) {
        // ui.draggable.addClass("thumbnail");
        $(ui.draggable).appendTo(this);
        $(this).removeClass("border");
      }
    },
    over: function(event, ui) {
      ui.draggable.removeClass("enlarge");
      ui.draggable.addClass("thumbnail");
      $(this).addClass("border");
    },
    out: function(event, ui) {
      // ui.draggable.removeClass("zoomIn")
      $(this).removeClass("border");
    },

    tolerance: 'intersect'
  });

CSS: 

.thumbnail  {
  height:60px;
  margin-right:10px;
  width:80px;
  z-index:1;
}
.enlarge {
  border:5px solid white;
  height:145px;
  width:195px;
}

1 Ответ

3 голосов
/ 01 апреля 2010 
  $('.draggable').draggable({
    revert: 'invalid',
    revertDuration: 500,
    appendTo: 'body',

    helper: function(event, ui) {
      return $(this).clone().appendTo('body').css('zIndex', 5).show();
    },
    drag: function(event, ui) {
   /* $(ui.helper).removeClass("enlarge");
      $(ui.helper).addClass("thumbnail");  */
      $(this).hide();
    },
    stop: function(event, ui) {
      $(this).show();
      //$(this).addClass("enlarge");
      if ($(this).parent().hasClass("imageContainer")) {
        $(this).addClass("thumbnail");
      }
      else {
        $(this).addClass("enlarge");
      }
    },
    //cursorAt: { top: 30, left: 40 },
    delay: 100,
    refreshPositions: true
  });

Попробуйте заменить ваш код этим блоком выше и посмотрите, подходит ли он к тому, что вы хотите. Возможно, он еще не идеален, но давайте посмотрим, сможем ли мы справиться с одним изменением за раз. Надеюсь заметить, что он падает примерно так, как должен.

...