jQuery UI 可拖动到更小的 droppable [英] jQuery UI draggable to smaller droppable

问题描述

我正在使用这个
_{(来源:yart.com.au)}

有没有办法解决这个问题?

这是代码，谢谢.

 $('.draggable').draggable({还原:'无效'，恢复时间:500，appendTo: '正文',助手:函数(事件，用户界面){return $(this).clone().appendTo('body').css('zIndex', 5).show();},拖动:函数(事件，用户界面){$(ui.helper).removeClass("放大");$(ui.helper).addClass("缩略图");$(this).hide();},停止:函数(事件，用户界面){$(this).show();//$(this).addClass("放大");if ($(this).parent().hasClass("imageContainer")) {$(this).addClass("thumbnail");}别的 {$(this).addClass("放大");}},//cursorAt: { top: 30, left: 40 },延迟:100，刷新位置:真});$('.imageContainer').droppable({接受:'.draggable',下降:函数(事件，用户界面){ui.draggable.css({位置":相对"，左":0px"，顶部":0px"});if ($(this).children().length == 0) {//ui.draggable.addClass("thumbnail");$(ui.draggable).appendTo(this);$(this).removeClass("border");}},结束:函数(事件，用户界面){ui.draggable.removeClass("放大");ui.draggable.addClass("缩略图");$(this).addClass("border");},出:功能(事件，用户界面){//ui.draggable.removeClass("zoomIn")$(this).removeClass("border");},公差:'相交'});

CSS:

.thumbnail {高度:60px；边距右:10px；宽度:80 像素；z-索引:1；}.放大{边框:5px 纯白色；高度:145px；宽度:195px；}

解决方案

 $('.draggable').draggable({还原:'无效'，恢复时间:500，appendTo: '正文',助手:函数(事件，用户界面){return $(this).clone().appendTo('body').css('zIndex', 5).show();},拖动:函数(事件，用户界面){/* $(ui.helper).removeClass("放大");$(ui.helper).addClass("缩略图");*/$(this).hide();},停止:函数(事件，用户界面){$(this).show();//$(this).addClass("放大");if ($(this).parent().hasClass("imageContainer")) {$(this).addClass("thumbnail");}别的 {$(this).addClass("放大");}},//cursorAt: { top: 30, left: 40 },延迟:100，刷新位置:真});

尝试用上面的这个块替换你的代码，看看它是否接近你想要的.它可能还不完美，但让我们看看我们是否可以一次解决一个变化.我希望观察到的是它会下降.

I am using this http://jqueryui.com/demos/droppable/

But I have a problem dragging to a droppable that is smaller than the draggable.
It will not drop on the droppable, but on the top left of the droppable.

_{(source: yart.com.au)}

Is there any way around this?

Here is the code, thanks.

  $('.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;
}

解决方案

  $('.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
  });

Try replacing your code with this block above and see if it comes close to what you want. It may not be perfect yet, but let's see if we can tackle one change at a time. What I'm hoping to observe is that it drops approximately like it should.

这篇关于jQuery UI 可拖动到更小的 droppable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！