开发者社区> 问答> 正文

HTML中拖拽操作如何实现啊?

已解决

HTML中拖拽操作如何实现啊?

展开
收起
月亮很亮 2022-08-15 12:25:37 342 0
1 条回答
写回答
取消 提交回答
  • 推荐回答
    <style type "text/css">
    #div1 {width:198px; height:66px;padding:10px;border:1px solid#aaaaaa;} s/style>
    <script type="text/javascript"> function allowDrop(ev)
    ev.preventDefault();}
    function drag(ev){
    evdataTransfersetData("Text",evtargetid);}
    function droplev){
    evpreventDefault();
    var data=ev.dataTransfergetData("Text");
    ev.target.appendChild(documentgetElementById(data));}
    </script></head><body>
    <p>请把W3School的图片拖放到矩形中:</p >
    <div id="div1" ondrop="drop(event)" ondragover "allowDrop(event)"></div><br />
    < img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
    </body>
    </html>
    这一段代码就可以实现拖拽操作
    
    2022-08-15 13:33:07
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
技术图谱:由专家组参与技术图谱的绘制与编写,知识与实践的结合让开发者们掌握学习路线与逻辑,快速提升技能 电子书:电子书由阿里内外专家打造,供开发者们下载学习,更与课程相结合,使用户更易理解掌握课程内容 训练营:学习训练营 深入浅出,专家授课,带领开发者们快速上云 精品课程:汇集知识碎片,解决技术难题,体系化学习场景,深入浅出,易于理解 技能自测:提供免费测试,摸底自查 体验实验室:学完即练,云资源免费使用
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载