react-as-dnd
一般拖拽
<![CDATA[
React.render(
<div className="ctn">
<Draggable>
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('normal')
);
]]>
起始位置
<![CDATA[
React.render(
<div className="ctn">
<Draggable start={{x: 100,y: 100}}>
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('startPoint')
);
]]>
X轴拖拽
<![CDATA[
React.render(
<div className="ctn">
<Draggable axis="x">
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('axisX')
);
]]>
Y轴拖拽
<![CDATA[
React.render(
<div className="ctn">
<Draggable axis="y">
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('axisY')
);
]]>
网格拖拽
<![CDATA[
React.render(
<div className="ctn">
<Draggable grid={{
x: 100,
y: 100
}}>
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('limit-parent')
);
]]>
限制父容器
<![CDATA[
React.render(
<div className="ctn">
<Draggable limit="parent">
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('limit-parent')
);
]]>
限制移动区域
<![CDATA[
React.render(
<div className="ctn">
<Draggable start={{x: 100, y: 0}} limit={{
x: [100, 'parent'],
y: 'parent'
}}>
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('limit-area')
);
]]>
无需拖拽影子元素
<![CDATA[
React.render(
<div className="ctn">
<Draggable shadow={false}>
<div className="square"></div>
</Draggable>
</div>,
document.getElementById('no-shadow')
);
]]>
指定可拖拽区域
<![CDATA[
React.render(
<div className="ctn">
<Draggable dragger=".dragger">
<div className="square">
<div className="dragger"></div>
</div>
</Draggable>
</div>,
document.getElementById('dragger')
);
]]>