Wie erzielt das html5draggable-Attribut den Seitenzieheffekt? Die Methode ist hier zusammengefasst!

In diesem Artikel geht es hauptsächlich um die Technologie des Ziehens von Attributen, um den Effekt des Seitenziehens zu erzielen, und Sie werden Schritt für Schritt feststellen, dass dies tatsächlich nicht schwierig ist.

In diesem Artikel wird Draggable (Ziehen) vorgestellt, um den Zieheffekt von Seitenelementen zu erzielen. Gehen wir also Schritt für Schritt vor.

1. Lademethode (zuerst die Lademethode)

1.css-Stil laden:

<div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">
    内容部分
</div>

Die Verwendung des CSS-Stils zum Laden von Draggable ist praktisch und schnell, aber nicht förderlich für die Verwaltung. Daher haben wir eine zweite Lademethode: Verwenden von JQuery zum Laden. Im Allgemeinen verwenden wir JQuery zum Laden.

2. Jquery wird geladen:

//不加属性
$('#box').draggable();
//JS部分
$('#box').draggable({
    revert : true,        //拖动后是否回到起始位置，boolean类型
    cursor : 'text',       //鼠标拖拽样式，十字，文本等
    handle : '#pox',       //句柄，设置后只在设置后只能在当前元素下实现拖拽
    disabled : false,       //设置是否可以被拖拽
    edge : 50,          //设置边界往内多大距离可以实现拖拽
    axis : 'v',          //设置拖拽方向，v：垂直拖拽，h：水平拖拽
    proxy: 'clone',        //设置代理元素，使用clone时为复制当前元素
    deltaX : 10,         //被拖拽元素左上角距离当前光标的X轴方向的距离
    deltaY : 10,         //被拖拽元素左上角距离当前光标的Y轴方向的距离  
    proxy: function(source){    //自定义代理元素
    var p = $(&#39;<div style="border:1px solid
    #ccc;width:400px;height:200px;"></div>&#39;);
    p.html($(source).html()).appendTo(&#39;body&#39;);
    return p;
    },
});
//HTML部分
<div id="box" style="width:400px;height:200px;background:red;">
    内容部分
</div>

2. Ereignisse (das zweite sind Ereignisse)

1.onBeforeDrag tritt vor dem Ziehen auf

$('#box').draggable({
    onBeforeDrag : function (e) {
        alert('拖动之前触发！');
        //return false;
    }
});

tritt vor dem Ziehen auf, was geschieht, wenn die Maus auf das Element klickt. Wenn false zurückgegeben wird, ist das Ziehen nicht möglich . Wir werden nicht zulassen, dass es direkt false zurückgibt, da es keinen Sinn ergibt und bei der Verwendung ein ausreichendes logisches Urteilsvermögen vorhanden sein sollte.

2.onStartDrag tritt auf, wenn das Ziehen beginnt.

$('#box').draggable({
    onStartDrag : function (e) {
        alert('拖动开始时触发！');
        //return false;
    }
});

wird im Moment des Ziehens nach dem Mausklick ausgeführt, und die Ausführungszeit liegt nach onBeforeDrag.

3.onDrag wird während des Ziehvorgangs ausgeführt

$('#box').draggable({
    onDrag : function (e) {
        alert('拖动过程中触发！');
    }
});
在拖

wird während des Ziehvorgangs ausgeführt und gibt beim Ziehen „false“ zurück ist nicht möglich

4.onStopDrag Tritt auf, nachdem das Ziehen stoppt

$('#box').draggable({
    onStopDrag : function (e) {
        alert('在拖动停止时触发！');
    }
});

Wird nach dem Ende des Ziehens ausgelöst, d. h. es wird ausgeführt, wenn die Maus losgelassen wird, mit kein Rückgabewert.

Die oben genannten Ereignisse können in Kombination verwendet werden, und die Ausführungsreihenfolge ist onBeforeDrag --> onStopDrag

$('#box').draggable({
    onBeforeDrag : function (e) {
         alert('拖动之前触发！');
        //return false;
    },
    onStartDrag : function (e) {
       alert('拖动时触发！');
    },
    onDrag : function (e) {
        alert('拖动过程中触发！');
    },
    onStopDrag : function (e) {
        alert('在拖动停止时触发！');
},});

Drei Methoden (die dritte ist die Methode)

Methodenname: Beschreibung

• Option: Attributobjekt zurückgeben

• Proxy: Wenn das Proxy-Attribut festgelegt ist, geben Sie das Drag-Proxy-Element zurück

• enabl: Ziehen zulassen

• deaktivieren: Ziehen deaktivieren

//返回属性对象
console.log($('#box').draggable('options'));
//返回代理元素
onStartDrag : function (e) {
console.log($('#box').draggable('proxy'));
},
//禁止拖动
$('#box').draggable('disable');
//允许拖放
$('#box').draggable('enable');

4. Standardattribute festlegen (dies ist die letzte Einstellung)

Nach einer Einstellung haben alle Drag-and-Drops auf der aktuellen Seite dieses Attribut gemeinsam, sodass es nicht erforderlich ist, es erneut festzulegen.

$(function(){
    $.fn.draggable.defaults.cursor = 'text';
});

Das Obige ist der gesamte Inhalt dieses Artikels über das Ziehen von Seiten mit dem Draggable-Attribut (wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website. Wenn Sie Fragen haben, können Sie diese unten stellen). .

[Empfehlung des Herausgebers]

Wie entferne ich die Beschriftung vom ol-Tag in HTML? Zusammenfassung zur Verwendung von

Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilinstanzanalyse einer ungeordneten HTML-Liste


Das obige ist der detaillierte Inhalt vonWie erzielt das html5draggable-Attribut den Seitenzieheffekt? Die Methode ist hier zusammengefasst!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!