注册 登录
编程论坛 JavaScript论坛

js拖拽功能实现了。可是怎样让拖拽的元素禁止拖拽到另外的元素内部呢?

小薛薛 发布于 2016-07-13 10:25, 3895 次点击
js拖拽功能实现了。可是怎样让拖拽的元素禁止拖拽到另外的元素内部呢?
详情请看js的已写的内容
function drop(ev)
{
    type_title = "<div class='alert fade in' style='margin:0'>\
                   <button type='button' class='close' data-dismiss='alert'>x</button>\
                   <input class='form-control' placeholder='请输入标题或正文:'/>\
                  </div>";
    type_text  = "<div class='alert fade in' style='margin:0'>\
                    <button type='button' class='close' data-dismiss='alert'>x</button>\
                    <textarea id='compose-textarea' class='form-control'  style='height: 200px'>请输入任务的详细信息:</textarea>\
                  </div>";
    type_img   = "<div class='alert fade in' style='margin:0'>\
                    <button type='button' class='close' data-dismiss='alert'>x</button>\
                    <p style='font-size:18px; color:#000;'>照片:</p>\
                    <button onclick='' class='btn btn-large btn-primary' type='button' style='margin-right:0; float:right;margin-top:5px;'>添加照片</button>\
                    <img src='../../dist/img/photo3.png' class='img-polaroid' style='width:30%'>\
                  </div>";
    type_audio = "<div class='alert fade in' style='margin:0'>\
                  <button type='button' class='close' data-dismiss='alert'>x</button>\
                  <p style='font-size:18px; color:#000; margin-top:10px;'>语音:</p>\
                  <div class='col-md-12'>\
                  <div class='col-md-9'><audio src='#' controls style='width:100%'></audio></div>\
                  <div class='col-md-3'><button onclick='' class='btn' type='button' style='margin-right:0; float:right;'>添加语音</button></div>\
                  </div>\
                  </div>";
    type_form = "<div class='alert fade in' style='display:block;margin-top:10px; margin-left:15px;'>\
                  <button type='button' class='close' data-dismiss='alert'>x</button>\
                  <p style='font-size:18px; color:#000; margin-top:10px;'>表格:</p>\
                  <from action='' enctype='multipart/from-data' method='post'>\
                    <input type='file' name='file3' />\
                  </from>\
                </div>";
  
    ev.preventDefault();
    var type=ev.dataTransfer.getData('Text');
    if(type=="title")
      ev.target.innerHTML =  ev.target.innerHTML+type_title;
    else if(type=="text")
      ev.target.innerHTML =  ev.target.innerHTML+type_text;
    else if(type=="img")
      ev.target.innerHTML =  ev.target.innerHTML+type_img;
    else if(type=="audio")
      ev.target.innerHTML =  ev.target.innerHTML+type_audio;
    else if(type=="form")
      ev.target.innerHTML =  ev.target.innerHTML+type_form;
}
0 回复
1