jQuery拖拽生成表单 jquery拖拽事件

转载

云端创新梦想家 2024-08-12 21:47:05

文章标签 jQuery拖拽生成表单 javascript ViewUI 数据 ide 文章分类 jQuery 前端开发

原生写法

var dragged;

  /* 可拖动的目标元素会触发事件 */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // 保存拖动元素的引用(ref.)
      dragged = event.target;
      // 使其半透明
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // 重置透明度
      event.target.style.opacity = "";
  }, false);

  /* 放下目标节点时触发事件 */
  document.addEventListener("dragover", function( event ) {
      // 阻止默认动作
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // 当可拖动的元素进入可放置的目标高亮目标节点
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // 当拖动元素离开可放置目标节点，重置其背景
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // 阻止默认动作（如打开一些元素的链接）
      event.preventDefault();
      // 移动拖动的元素到所选择的放置目标节点
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);
复制代码

jQuery写法

//拖放开始:获取id放入dataTransfer
    $(".divide-pep").on("dragstart",function(e){
        e.originalEvent.dataTransfer.setData("obj_add",e.target.id);
        console.log(e.originalEvent.dataTransform)
    });

    //允许放入
        $(".divide-droppable,.option-area").on("dragover",function(e){
        e.originalEvent.preventDefault();
    })

    //放下事件
        $(".divide-droppable").on("drop",function(e){
        e.originalEvent.preventDefault;
        var id = e.originalEvent.dataTransfer.getData("obj_add");
        $(this).append($("#"+id));
     })

        $(".option-area").on("drop",function(e){
            e.originalEvent.preventDefault;
            var id = e.originalEvent.dataTransfer.getData("obj_add");
            $(this).append($("#"+id));
      })
复制代码

originalEvent是什么？

个人理解originalEvent是jQuery封装的，用于获取原生event事件的；

栗子

$('#aaa').on("touchstart", touchStart);
    function touchStart(event){
        console.log(event);
}
//这样可读到，event.originalEvent.touches[0]
复制代码

//用原生的，这样可读到，event.touches[0]
document.getElementById('aaa').addEventListener("touchstart", touchStart, false);
    function touchStart(event){
        console.log(event.touches[0]);
}
复制代码