JavaScript перетаскивание прокси - PullRequest
Новая
       2

JavaScript перетаскивание прокси

3 голосов
/ 30 июня 2010

Я хочу включить поведение перетаскивания в моем веб-приложении. У меня есть изображение, которое я хочу перетащить. Изображение находится позади другого с прозрачными секциями, чтобы вы могли видеть изображение под ним. Я не хочу менять порядок изображений. Я думаю, мне следует использовать другой слой поверх обоих изображений, который будет прозрачным, и использовать его в качестве прокси для передачи событий в изображение, которое я хочу перетащить. Функция draggable пользовательского интерфейса jQuery не позволяет мне передавать события в режиме реального времени, т. е. я не могу подключиться к тому, что происходит во время перетаскивания, только после его завершения.

Существует ли библиотека JavaScript или плагин jQuery, которые позволят мне включать и перетаскивать элемент и передавать его в другой элемент в режиме реального времени?

1 Ответ

2 голосов
/ 30 июня 2010

Возможно, я не понимаю, чего вы пытаетесь достичь, но вы должны иметь возможность без проблем перетаскивать перекрывающиеся изображения ( demo ).

Просто оберните оба изображения в div, а затем сделайте div перетаскиваемым:

CSS (нет необходимости делать .dragme относительной позиции, потому что это делается в перетаскиваемом скрипте) 

.dragme img {
 position: absolute;
 top: 0;
 left: 0;
}

HTML 

<div class="dragme">
 <img src="image1.gif">
 <img src="image2.gif">
</div>

Сценарий 

$(".dragme").draggable();

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

CSS 

#draggable, #droppable {
 width: 450px;
 height: 250px;
 padding: 0.5em;
 margin: 10px;
 background: #ddd;
 color:#000;
}
.dragme {
 position: relative;
 width: 100px;
 padding: 5px;
}
.dragme img {
 position: absolute;
 top: 55px;
 left: 30px;
}
.demo {
 width: 500px;
}
.border {
 position: absolute;
 top: 75px;
 left: 30px;
 z-index: 1;
}

HTML 

<div class="demo">
 <div class="border">
  <img src="http://www.imageuploading.net/image/thumbs/large/border-564.png">
 </div>
 <div id="draggable" class="ui-widget-content">
  <p>Drag from here</p>   
  <div class="dragme">
   <img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
  </div>
 </div>
 <div id="droppable">
  <p>Drop here</p>
 </div>
</div>

Script (Демо использует $ (document) .ready, потому что jsFiddle не нравится $ (window) .load) 

$(window).load(function(){
 // cycle through draggable divs (in case there are more than one)
 $(".dragme").each(function(){
  var img = $(this).find('img');
  var pos = img.position();
  // create div overlay on image
  $('<div/>', {
   class : 'overlay',
   css: {
    position: 'relative',
    top: pos.top,
    left: pos.left,
    width: img.outerWidth(),
    height: img.outerHeight(),
    zIndex: 100
   }
  })
   // save original image position
   .data('pos', [pos.left, pos.top])
   .appendTo($(this));

  // make overlay draggable
  $(this).find('.overlay').draggable({
   containment : '.demo',
   revert: true,
   revertDuration: 0,
   handle: 'div',
   // drag overlay and image
   drag: function(e,ui){
    img = $(this).parent().find('img');
    img.css({
     top: ui.position.top,
     left: ui.position.left
    });
   },
   // make image revert
   stop: function(e,ui){
    pos = $(this).data('pos');
    $(this).parent().find('img').animate({left: pos[0], top: pos[1] },500);
   }
  });
 });

 $("#droppable").droppable({
  drop : function(e,ui) {
   // append entire div wrapper (.dragme)
   ui.helper.parent().appendTo($(this));
  }
 });
});
...