元素是未定義的HTML 5拖放

Question

我想模擬HTML 5拖放與硒Webdriver。與我試圖模擬這個過程的代碼

public class HTMLDragandDrop { 
@Test 
public void dragAndDrop() throws AWTException, InterruptedException, IOException { 
    WebDriver driver=new FirefoxDriver(); 
    driver.get("http://the-internet.herokuapp.com/drag_and_drop"); 
    Thread.sleep(5000); 
    driver.manage().window().maximize(); 
    String jquery_url = "http://code.jquery.com/jquery-1.11.2.min.js"; 
    String js_filepath = "/Users/sri/Desktop/drag_and_drop.js"; 
    String java_script=""; 
    String text; 
    String jq_script=""; 
    String jqtext; 
    BufferedReader input = new BufferedReader(new FileReader(js_filepath)); 
    StringBuffer buffer = new StringBuffer(); 
    while ((text = input.readLine()) != null) 
     buffer.append(text + " "); 
     java_script = buffer.toString(); 
    String jQUERY_filepath = "/Users/sri/Desktop/Jquery_Loader.js"; 
    BufferedReader inputjq = new BufferedReader(new FileReader(jQUERY_filepath)); 
    StringBuffer bufferjq = new StringBuffer(); 
    while ((jqtext = inputjq.readLine()) != null) 
     bufferjq.append(jqtext + " "); 
     jq_script = bufferjq.toString();    
     JavascriptExecutor js=new JavascriptExecutor() { 
      @Override 
      public Object executeAsyncScript(String arg0, Object... arg1) { 
       return null; 
      } 
      @Override 
      public Object executeScript(String arg0, Object... arg1) { 
       return null; 
      } 
     }; 
     input.close(); 
     inputjq.close(); 
     js.executeAsyncScript(jq_script, jquery_url); 
     java_script = java_script+"$('#column-a').simulateDragDrop('#column-b');" ; 
     ((JavascriptExecutor)driver).executeScript(java_script); 
    } 
} 

和拖放js文件包含以下代碼

(function($) { 
    $.fn.simulateDragDrop = function(options) { 
      return this.each(function() { 
        new $.simulateDragDrop(this, options); 
      }); 
    }; 
    $.simulateDragDrop = function(elem, options) { 
      this.options = options; 
      this.simulateEvent(elem, options); 
    }; 
    $.extend($.simulateDragDrop.prototype, { 
      simulateEvent: function(elem, options) { 
        /*Simulating drag start*/ 
        var type = 'dragstart'; 
        var event = this.createEvent(type); 
        this.dispatchEvent(elem, type, event); 

        /*Simulating drop*/ 
        type = 'drop'; 
        var dropEvent = this.createEvent(type, {}); 
        dropEvent.dataTransfer = event.dataTransfer; 
        this.dispatchEvent($(options.dropTarget)[0], type, dropEvent); 

        /*Simulating drag end*/ 
        type = 'dragend'; 
        var dragEndEvent = this.createEvent(type, {}); 
        dragEndEvent.dataTransfer = event.dataTransfer; 
        this.dispatchEvent(elem, type, dragEndEvent); 
      }, 
      createEvent: function(type) { 
        var event = document.createEvent("CustomEvent"); 
        event.initCustomEvent(type, true, true, null); 
        event.dataTransfer = { 
          data: { 
          }, 
          setData: function(type, val){ 
            this.data[type] = val; 
          }, 
          getData: function(type){ 
            return this.data[type]; 
          } 
        }; 
        return event; 
      }, 
      dispatchEvent: function(elem, type, event) { 
        if(elem.dispatchEvent) { 
          elem.dispatchEvent(event); 
        }else if(elem.fireEvent) { 
          elem.fireEvent("on"+type, event); 
        } 
      } 
    }); 
})(jQuery); 

我總是最後的ELEM是不確定的。請幫我解決。

Answer 1

要模擬拖放（HTML5）：

static final String JS_DRAG_AND_DROP = 
    "var src=arguments[0],tgt=arguments[1];var dataTransfer={dropEff" + 
    "ect:'',effectAllowed:'all',files:[],items:{},types:[],setData:f" + 
    "unction(format,data){this.items[format]=data;this.types.append(" + 
    "format);},getData:function(format){return this.items[format];}," + 
    "clearData:function(format){}};var emit=function(event,target){v" + 
    "ar evt=document.createEvent('Event');evt.initEvent(event,true,f" + 
    "alse);evt.dataTransfer=dataTransfer;target.dispatchEvent(evt);}" + 
    ";emit('dragstart',src);emit('dragenter',tgt);emit('dragover',tg" + 
    "t);emit('drop',tgt);emit('dragend',src);"; 


WebDriver driver = new FirefoxDriver(); 
driver.get("http://the-internet.herokuapp.com/drag_and_drop"); 

WebElement ele_drag = driver.findElement(By.id("column-a")); 
WebElement ele_drop = driver.findElement(By.id("column-b")); 

JavascriptExecutor js = (JavascriptExecutor)driver; 
js.executeScript(JS_DRAG_AND_DROP, new Object[]{ele_drag, ele_drop});