2015-10-01 5 views
0

Заранее благодарю вас за это! У меня возникают проблемы моделирования падения функции перетаскивания & предоставленной JQuery UI с помощью расширенного плагина здесь:jQuery Drag & Drop Simulate Plugin

https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md

В документации используется следующей, к которой я изменил номера своих потребностей:

$('#draggableDiv').simulate("drag", {dragTarget: otherDiv}); 

Changed to this: 
$('#placeme').simulate("drag", {dragTarget: $("#page1")}); 

Мое предупреждение никогда не появляется, поэтому очевидно, что функция drop никогда не запускается, я не уверен, почему. Ручное перетаскивание объекта на страницу1 ведет себя нормально.

JSFiddle: http://jsfiddle.net/d2fdvxhz/8/

HTML:

<div class="container"> 
    <div id="view-port"> 
     <div id="placeme" class="droppableShape"> 
      <img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" width="25" height="25" /> 
     </div> 
     <button id="testme">Simulate Drop</button> 
     <div class="page" id="page1" style="background-image: url(http://images.huffingtonpost.com/2012-08-15-1CanvasPanelInstall5psd.jpg);"></div> 
     <!-- Pages Here --> 
    </div> 
</div> 

JS:

$(document).ready(function(){ 
    $(".droppableShape").draggable({ 
      helper:'clone' 
    }); 

    $(".page").droppable({ 
     accept: ".droppableShape", 
     tolerance: 'fit', 
     drop: function(event,ui){ 
      alert("Drop Detected"); 

      var new_field = $(ui.helper).clone().removeClass('droppableShape'); 
      var droppable_page = $(this); 
      var droppableOffset = $(this).offset(); 
      new_field.css('top', ui.position.top - droppableOffset.top); 
      new_field.css('left', ui.position.left - droppableOffset.left); 

      // Set Draggable Options 
      new_field.draggable({ 
       containment: droppable_page, 
       stop: function(event, ui) { 
        // Save position after dragging stops 
        $(this).data("x_cord", ui.position.left); 
        $(this).data("y_cord", ui.position.top); 
        $(this).draggable("disable"); 
       } 
      }); 

      // Add to drop area 
      $(this).append(new_field); 
     } 
    }); 

    $("#testme").click(function() { 
     $('#placeme').simulate("drag", { 
      dragTarget: $("#page1") 
     }); 
     console.log("Simulate Attempted"); 
    }); 
}); 

ответ

0

Вы должны использовать

$('#placeme').simulate("drag-n-drop", { 

Как документально here

Работа fiddle

Если вы имитировать просто перетащить, капли никогда не происходит

+0

Спасибо за помощь! Это работало на скрипке, пытаясь применить это к моему реальному проекту, поскольку я не мог опубликовать исходный код. Радуйся за свое время. –