html css拖拽设计,css绘制三角形 和 HTML拖拽事件

利用css制作三角形

利用设置边框的三个边的长度和border实现三角形设置，并隐藏其他边

例子：#yz3{

display: inline-block;

0;

height: 0;

border-top: 5px solid transparent;

border-left: 6px solid #F3D995;

border-bottom: 5px solid transparent;

}

HTML拖拽事件(两大种，七小种)

一、原对象事件(被拖拽事件)

ondragstart 拖拽开始

ondrag 拖拽过程

ondragend 拖拽结束

二、目标元素事件(进入的元素)

ondragenter 进入目标元素

ondragover 目标元素上移动

ondragleave 离开目标元素

ondrop 在目标元素上释放

(阻止浏览器默认事件)

例子：

#drag{

150px;

heigh:150px;

background:blue;

}

#box{

500px;

heigh:150px;

border:3px red soild

magin:100px auto

}

//变为可拖动

var oDrag=document.getElementById('drag');

var oBox=document.getElementById('drag');

//原对象事件

//拖拽开始变色

oDrag.οndragstart=function(){

this.style.background='green'；

}

//拖拽变色

oDrag.οndrag=function(){

this.innerHTML=‘被拖拽中....’

}

//松开鼠标时改回原色

oDrag.οndragend=function(){

this.style.background='blue'；

}

//目标元素事件

//进入时改变颜色

oBox.οndragenter=function(e){

e.preventDefault()//阻止浏览器的默认事件

this.style.background='yellow'

}

//移动时改变颜色

oBox.οndragοver=function(){

e.preventDefault()//阻止浏览器的默认事件

this.style.background='red'

}

//鼠标离开时变色

oBox.οndragleave=function(){

this.style.background='none'

}

//鼠标释放时变色

oBox.οndrοp=function(){

this.style.background='blue'

}