HTML5拖拽事件

心存美好 2023-05-23 原文

HTML5拖拽事件

1. 设置拖拽

图片自带拖拽功能
其他元素可设置draggable属性

<div draggable="true">
    
</div>

<style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div> <!-- draggable给div设置拖拽，希望是ture必须明确写上true -->
</body>

例子:

box.ondragend = function (e) {
    box.style.cssText = 'top:' + (e.clientY) + 'px;left:' + (e.clientX) + 'px'

}

  <style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div> <!-- draggable实现拖拽功能，希望是ture必须明确写上true -->

<script>
  //js实现元素拖到那儿就定位到哪
  box.ondragend = function (e) {  //ondragend是js拖拽事件，松开鼠标哪一刻就会触发这个事件，获取事件对象，获得元素距离浏览器左侧、顶端的距离
    // this.style.top =`${e.clientY}px`//这种写法实际是将鼠标所在点的值给了元素距离左侧和上部，不准确
    // this.style.left =`${e.clientX}px`
    // box.style.cssText = 'top:' + (e.clientY) + 'px;left:'+(e.clientX)+'px'//js中设置css样式的文本
    this.style.cssText = `top:${e.clientY}px;left:${e.clientX}px`//js中设置css样式的文本
  }
</script>
</body>

1.1. 拖拽元素(被拖拽元素对象)事件 :

ondragstart : 拖拽前触发 ,事件只触发一次
ondrag :拖拽前、拖拽结束之间，连续触发
ondragend :拖拽结束触发 ,事件只触发一次

const box = document.getElementById('box');

// dragstart 拖拽开始时触发,只触发一次
box.ondragstart = function () {
    this.style.background = 'blue';

}

// drag拖拽触发的事件,连续触发,只要鼠标不松开会一直触发
box.ondrag = function () {
    this.style.background = 'yellow';
}

// dragend 拖拽结束时,触发的事件,只要鼠标一松开就触发
box.ondragend = function () {
    this.style.background = 'skyblue';
}

Element UI 拖拽排序

https://element.eleme.cn/#/zh-CN ---》组件（菜单）---》Tree树形控件---》可拖拽节点（右侧）

1.2. 目标元素(拖拽元素被拖到的对象)事件 ----[H5拖拽的容器事件]

ondragenter :进入目标元素触发
ondragover :进入目标、离开目标之间，连续触发
ondragleave :离开目标元素触发
ondrop :在目标元素上释放鼠标触发

// dragenter 拖拽元素移入目标元素时触发,鼠标进入才算哦
wrap.ondragenter = function () {
    this.innerHTML = '释放鼠标';
}

// dragove  拖拽的元素在目标元素中触发,会连续触发
wrap.ondragover = function (e) {
    this.style.background = '#999';
    console.log(num++);
    // e.preventDefault();
    return false;
}

// dragleave  拖拽的元素离开目标元素时触发,鼠标离开才算
wrap.ondragleave = function () {
    this.innerHTML = '请将元素拖进来';
}

// drop  在目标元素中松口鼠标触发,如果要触发这个事件,必须先将drapover事件取消默认事件
wrap.ondrop = function () {
    this.style.background = 'skyblue';
    console.log('你在目标元素中松口了鼠标');
    document.body.removeChild(box);
}

<style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function () {
      console.log('开始拖拽……');
      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完毕……');
      this.style.background = 'skyblue';
    }
    //目标元素(容器)的四个事件
    wrap.ondragenter = function () {//元素拖入
      this.innerHTML = '请释放鼠标';
    }
    wrap.ondragleave = function () {//元素离开
      this.innerHTML = '请将元素拖进来';
    }
    let num = 0;
    wrap.ondragover = function (e) {//在里面移动
      this.style.background = 'skyblue';
      console.log('num', num++)  //在里面时num一直在++
      e.preventDefault()//清除默认事件，拖拽时要阻止默认事件，才会触发鼠标松开ondrop
      // return false;//阻止默认事件
    }
    wrap.ondrop = function () {//鼠标松开
      this.style.background = 'pink';
      console.log('你在目标元素中松开了鼠标');
      document.body.removeChild(box);//拖拽完毕后在body里删除原来的box元素
    }
  </script>
</body>

2. 拖拽兼容问题

只作为了解, 因为现在火狐已经没有兼容问题

火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签

火狐在没有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以

  <style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('开始拖拽……');
      //火狐老版本兼容问题需要线获取dataTransfer对象
      let data = e.dataTransfer;
      console.log(data)
      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完毕……');
      this.style.background = 'skyblue';
    }
    //目标元素(容器)的四个事件
    wrap.ondragenter = function () {//元素拖入
      this.innerHTML = '请释放鼠标';
    }
    wrap.ondragleave = function () {//元素离开
      this.innerHTML = '请将元素拖进来';
    }
    let num = 0;
    wrap.ondragover = function (e) {//在里面移动
      this.style.background = 'skyblue';
      console.log('num', num++)  //在里面时num一直在++
      e.preventDefault()//清除默认事件，拖拽时要阻止默认事件，才会触发鼠标松开ondrop
      // return false;//阻止默认事件
    }
    wrap.ondrop = function () {//鼠标松开
      this.style.background = 'pink';
      console.log('你在目标元素中松开了鼠标');
      document.body.removeChild(box);//拖拽完毕后在body里删除原来的box元素
    }
  </script>
</body>

2.1. dataTransfer对象

dataTransfer 是拖拽事件对象的属性

setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value

  <style>
    #box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('开始拖拽……');
      let data = e.dataTransfer;
      let color = '#' + Math.random().toString(16).substr(2, 6);
      data.setData('color', color)// 通过dataTransfer对象保存数据     setData() : 设置数据 key和value(必须是字符串)
      console.log(data)
     
      data.effectAllowed = 'copyMove'; //拖动时改变光标样式
      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完毕……');
      this.style.background = 'skyblue';
    }
    //目标元素(容器)的四个事件
    wrap.ondragenter = function () {
      this.innerHTML = '请释放鼠标';
    }
    wrap.ondragleave = function () {
      this.innerHTML = '请将元素拖进来';
    }
    let num = 0;
    wrap.ondragover = function (e) {
      this.style.background = 'skyblue';
      console.log('num', num++)
      e.preventDefault()
    }
    wrap.ondrop = function (e) {
      let color = e.dataTransfer.getData('color')//getData() : 获取数据，根据key值，获取对应的value
      this.style.background = color;
      console.log('你在目标元素中松开了鼠标');
      document.body.removeChild(box);
    }
  
  </script>
</body>

box.ondragstart = function (e) {
    this.style.background = 'blue';
    e.dataTransfer.setData('key', this.id);
    // 火狐必须加上这一行代码才能触发drag和dragend事件
}

// 设置的key在这里可以使用
wrap.ondrop = function (e) {
    this.style.background = 'skyblue';
  document.body.removeChild(document.getElementById(e.dataTransfer.getData('key')))//确定删除被拖进来的是哪个元素：先通过e.dataTransfer.getData('key')获取字符串--》再获取被拖的是哪个元素--》删除被拖的元素
}

effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

，参考上面的例子

 box.ondragstart = function (e) {
    console.log(e.dataTransfer);
    e.dataTransfer.effectAllowed = 'link';
}

设置拖拽元素影子的样式 setDragImage ：三个参数（指定哪个元素作为影子可以是图片，坐标X，坐标Y）

   box.ondragstart = function (e) {
       console.log(e.dataTransfer);
       e.dataTransfer.setDragImage(img, 100, 100);
   }

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      position: fixed;
      top: 100px;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    #wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 500px;
      height: 300px;
      background-color: rgba(100, 100, 100, .2);
    }
  </style>
</head>

<body>
  <img src="./images/333.jpg" id='img' width=100 height=100 alt="">
  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('开始拖拽……');
      let data = e.dataTransfer;
      let color = '#' + Math.random().toString(16).substr(2, 6);
      data.setData('color', color)
      console.log(data)

      //设置拖拽阴影的背景
      data.setDragImage(img, 0, 0)

      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完毕……');
      this.style.background = 'skyblue';
    }
    //目标元素(容器)的四个事件
    wrap.ondragenter = function () {
      this.innerHTML = '请释放鼠标';
    }
    wrap.ondragleave = function () {
      this.innerHTML = '请将元素拖进来';
    }
    let num = 0;
    wrap.ondragover = function (e) {
      this.style.background = 'skyblue';
      console.log('num', num++)
      e.preventDefault()
    }
    wrap.ondrop = function (e) {
      let color = e.dataTransfer.getData('color')
      this.style.background = color;
      console.log('你在目标元素中松开了鼠标');
      document.body.removeChild(box);
    }
  </script>
</body>

files：获取外部拖拽的文件，返回一个filesList列表
filesList下有个type属性，返回文件的类型

wrap.ondrop = function (e) {
    const dt = e.dataTransfer;
    console.log(dt.files)
    return false;
}

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    #box {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

#wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 300px;
  background-color: rgba(100, 100, 100, .2);
}
</style>
</head>

<body> 
  <img src="./images/333.jpg" id='img' width=100 height=100 alt="">

  <div draggable="true" id="box"></div>
  <div id="wrap"></div>
  <script>
    box.ondragstart = function (e) {
      console.log('开始拖拽……');
      let data = e.dataTransfer;
      let color = '#' + Math.random().toString(16).substr(2, 6);
      data.setData('color', color)
      console.log(data)
      data.setDragImage(img, 0, 0)


      this.style.background = 'blue';
    }
    box.ondrag = function () {
      console.log('正在拖拽……')
      this.style.background = 'yellow'
    }
    box.ondragend = function (e) {
      console.log('拖拽完毕……');
      this.style.background = 'skyblue';
    }
    //目标元素(容器)的四个事件
    wrap.ondragenter = function () {
      this.innerHTML = '请释放鼠标';
    }
    wrap.ondragleave = function () {
      this.innerHTML = '请将元素拖进来';
    }
    let num = 0;
    wrap.ondragover = function (e) {
      this.style.background = 'skyblue';
      console.log('num', num++)
      e.preventDefault()
    }
    wrap.ondrop = function (e) {
      console.log(e.dataTransfer.files)//元素拖进来了，可以打印文件的名字，拖进来的文件可以是任何外部的文件
      let color = e.dataTransfer.getData('color')
      this.style.background = color;
      console.log('你在目标元素中松开了鼠标');
      document.body.removeChild(box);
    }

  </script>
</body>

3. 读取读取文件信息

通过FileReader对象可以读取本地存储的文件信息, 使用File对象指定要读取的文件数据

3.1.FileReader(读取文件信息)

HTML5 新增的内置构造函数,可以读取本地文件的信息

方法:

readAsDataURL
参数为要读取的文件对象

onload当读取文件成功完成的时候触发此事件

this. result 获取读取的文件数据

wrap.ondrop = function (e) {
    const dt = e.dataTransfer;
    const oFile = dt.files.item(0);

    // 创建读取文件对象
    const file = new FileReader();

    // 获取文件的url
    file.readAsDataURL(oFile)
    
    // 当信息读取完成后执行
    file.onload = function () {
        // console.log(oFile);
        if (oFile.type.includes('image')) {
            const img = new Image();
            img.src = file.result;
            wrap.appendChild(img)
        }

    }
    return false;
}

性能低,没有必要吧这些字符串渲染到页面中

读取拖入的图片信息，并显示在页面上

 <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;

    }

    #wraps img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="wrap">请将文件拖入到此处</div>
  <div id="wraps"></div>
  <script>
    wrap.ondrop = function (ev) {
      //1.获取拖入文件的文件对象
      // let datafile =ev.dataTransfer.files[0] //获取拖入的文件方法一
      let dataFile = ev.dataTransfer.files.item(0) //获取拖入文件方法二
      console.log(dataFile)//通过文件对象可以看到文件信息
      //创建读取文件对象
      let files = new FileReader();
      console.log(files);
      //读文本信息
      // files.readAsText(dataFile)
      // files.onload = function(){
      //   console.log(this)
      // }
      //读取文件url信息
      files.readAsDataURL(dataFile)

      // 读取成功后触发事件
      files.onload = function () {
        console.log('files', this)   //result可以看到图片的base64信息，base64可以减少请求次数
        let img = new Image();
        img.src = this.result;
        wraps.appendChild(img)//把图片加到页面上去,在页面中显示
      }
    }
    /*阻止图片拖入浏览器后默认打开*/
    document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
  </script>
</body>

  <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;

    }

    #wraps img,
    #wraps div {
      width: 100px;
      height: 100px;
    }

    #wraps div {
      display: inline-block;
      background-color: pink;
      vertical-align: top;
      /* 默认基线对齐，改为顶部对齐 */
    }
  </style>
</head>

<body>
  <div id="wrap">请将文件拖入到此处</div>
  <div id="wraps"></div>
  <script>
    wrap.ondrop = function (ev) {
      //多文件的读取
      let dataFiles = [...ev.dataTransfer.files] //多个文件      
      console.log(dataFiles)//通过文件对象可以看到文件信息

      dataFiles.forEach(file => {
        console.log('file', file);
        let files = new FileReader();
        console.log(files)
        //判断是否为图片
        if (file.type.includes('image')) {

          //读取文件url信息
          files.readAsDataURL(file)
          // 读取成功后触发事件
          files.onload = function () {
            console.log('files', this)   //result可以看到图片的base64信息，base64可以减少请求次数
            let img = new Image();
            img.src = this.result;
            wraps.appendChild(img)//把图片加到页面上去,在页面中显示
          }
        }

        else {
          //读文本信息
          files.readAsText(file)
          files.onload = function () {
            let div = document.createElement('div')
            div.innerHTML = this.result;
            wraps.appendChild(div)
          }
        }
      })
    }
    /*阻止图片拖入浏览器后默认打开*/
    document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
  </script>
</body>

多文件的拖入上传

  <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;

    }

    #wraps img,
    #wraps div {
      width: 100px;
      height: 100px;
    }

    #wraps div {
      display: inline-block;
      background-color: pink;
      vertical-align: top;
      /* 默认基线对齐，改为顶部对齐 */
    }
  </style>
</head>

<body>
  <div id="wrap">请将文件拖入到此处</div>
  <div id="wraps"></div>
  <script>
    wrap.ondrop = function (ev) {
      //多文件的读取
      let dataFiles = [...ev.dataTransfer.files] //多个文件      
      console.log(dataFiles)//通过文件对象可以看到文件信息

      dataFiles.forEach(file => {
        console.log('file', file);
        let files = new FileReader();
        console.log(files)
        //判断是否为图片
        if (file.type.includes('image')) {

          //读取文件url信息
          files.readAsDataURL(file)
          // 读取成功后触发事件
          files.onload = function () {
            console.log('files', this)   //result可以看到图片的base64信息，base64可以减少请求次数
            let img = new Image();
            img.src = this.result;
            wraps.appendChild(img)//把图片加到页面上去,在页面中显示
          }
        }

        else {
          //读文本信息
          files.readAsText(file)
          files.onload = function () {
            let div = document.createElement('div')
            div.innerHTML = this.result;
            wraps.appendChild(div)
          }
        }
      })
    }
    /*阻止图片拖入浏览器后默认打开*/
    document.addEventListener('drop', function (e) {
      e.preventDefault()
    }, false)
    document.addEventListener('dragover', function (e) {
      e.preventDefault()
    }, false)
  </script>
</body>

3.2 利用表单域来读取文件

Files对象

表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息

<input type="file" name="file" multiple />

<script>
    var file = document.querySelector("input")

    file.addEventListener("change",function(){
        console.log(this.files)
    },false)

</script>

FileReader对象

利用FileReader读取信息

file.addEventListener("change",function(){
    console.log(this.files)
    var oFile = this.files[0]
    var readfile = new FileReader()

    readfile.readAsDataURL(oFile)
    readfile.onload = function(){
        var img = new Image()
        img.src= this.result;
        box.appendChild(img)
    }
},false)

  <style>
    #wrap {
      width: 400px;
      height: 100px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      margin: 10px auto;
    }
    #wraps img,
    #wraps div {
      width: 100px;
      height: 100px;
    }
    #wraps div {
      display: inline-block;
      background-color: pink;
      vertical-align: top;
      /* 默认基线对齐，改为顶部对齐 */
    }
  </style>
</head>

<body>
  <!-- 不用鼠标拖拽，用input选择文件 -->
  <input type="file" name="" id="file" multiple> <!-- multiple代表可以一次选多张图片 -->
  <div id="wraps"></div>
   <script>
    file.onchange = function () { //文件一旦改变会触发事件,会读取到文件
      console.log(this.files)
      //多文件的读取
      let dataFiles = [...this.files] //多个文件      
      console.log(dataFiles)//通过文件对象可以看到文件信息

      dataFiles.forEach(file => {
        console.log('file', file);
        let files = new FileReader();
        console.log(files)
        //判断是否为图片
        if (file.type.includes('image')) {

          //读取文件url信息
          files.readAsDataURL(file)
          // 读取成功后触发事件
          files.onload = function () {
            console.log('files', this)   //result可以看到图片的base64信息，base64可以减少请求次数
            let img = new Image();
            img.src = this.result;
            wraps.appendChild(img)//把图片加到页面上去,在页面中显示
          }
        }

        else {
          //读文本信息
          files.readAsText(file)
          files.onload = function () {
            let div = document.createElement('div')
            div.innerHTML = this.result;
            wraps.appendChild(div)
          }
        }
      })
    }
  </script>
</body>

有关HTML5拖拽事件的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
ruby-on-rails - 事件记录 : Select max of limit - 2
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。最佳答案从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).
ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315
ruby-on-rails - 事件管理员和自定义方法 - 2
这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

HTML5拖拽事件

HTML5拖拽事件

1. 设置拖拽

1.1. 拖拽元素(被拖拽元素对象)事件 :

Element UI 拖拽排序

1.2. 目标元素(拖拽元素被拖到的对象)事件 ----[H5拖拽的容器事件]

2. 拖拽兼容问题

2.1. dataTransfer对象

3. 读取读取文件信息

3.1.FileReader(读取文件信息)

3.2 利用表单域来读取文件

有关HTML5拖拽事件的更多相关文章

随机推荐