मैं interract.js से शुरू करता हूं और यह पता लगाने की कोशिश करता हूं कि इंडेक्स लक्ष्यों में मेरे तत्वों को परिभाषित आकारों में कैसे स्नैप किया जाए। जब मैं मूल्यों को स्थिर रूप से सेट करता हूं तो यह अच्छी तरह से काम करता है लेकिन असल में मैं मूल्यों को गतिशील बनाना चाहता हूं ताकि प्रत्येक तत्व एक-दूसरे को स्नैप कर सके। मुझे यह नहीं मिला कि दस्तावेज़ में यह कैसे करना है, क्या आपके पास एक शोध ट्रैक होगा जो मुझे ब्लॉक के विस्थापन के अनुसार मूल्यों को विकसित करने की इजाजत देता है, ताकि वे "स्नैपेबल" बन जाएं?

आदर्श रूप से मुझे लगता है कि हर बार जब आप किसी तत्व को स्थानांतरित करते हैं तो ये मान गतिशील रूप से बदलने में सक्षम होना चाहिए, इसलिए dragend ईवेंट का उपयोग करके, लेकिन आप मूल्यों में परिवर्तन को कैसे प्रभावी बनाते हैं ... आपकी प्रतिक्रिया के लिए आपका धन्यवाद।

// here I define my static values for the snap
var dynamicRestrictions = [
        {x: 200, range: 20},
        {x: 400, range: 20},
        {y: 300, range: 20}
    ];

interact('.resize-drag')
    .draggable({
        inertia: true,
        modifiers: [
            interact.modifiers.snap({
                targets: dynamicRestrictions, // <= how to dynamic edit them ?
                relativePoints: [
                    {x: 0, y: 0},
                    {x: 1, y: 1},
                    {x: 0, y: 1},
                    {x: 1, y: 0},
                ],
                offset: 'parent'
            }),
            ],
            autoScroll: true,
            listeners: {              
                move: dragMoveListener,
            }
        })
2
arno 14 अप्रैल 2020, 13:36

1 उत्तर

सबसे बढ़िया उत्तर

आप onstart ईवेंट पर किसी फ़ंक्शन का उपयोग कर सकते हैं।

.draggable({
    //...
    onstart: dragMoveStartListener,
    //...
})

जो आपको अपने हैंग वैल्यू सेट करने की अनुमति देगा।

function dragMoveStartListener(event) {
    var element = $(event.target);
    dynamicRestrictions.length = 0;
    $('.resize-drag').each(function () {
        if (!$(this).is(element)) {
            var thisPosition = $(this).position(),
                snapX = thisPosition.left,
                snapY = thisPosition.top,
                snapWidth = $(this).width(),
                snapHeight = $(this).height(),
                range = 20;
            var sumWidth = parseInt(snapX + snapWidth),
                sumHeight = parseInt(snapY + snapHeight);
            dynamicRestrictions.push({x: snapX, y: snapY, range: 10});
            dynamicRestrictions.push({x: snapX, range: range});
            dynamicRestrictions.push({x: sumWidth, range: range});
            dynamicRestrictions.push({y: snapY, range: range});
            dynamicRestrictions.push({y: sumHeight, range: range});                      
        }
    });
}

मैंने इसका परीक्षण किया और यह बहुत अच्छी तरह से काम करता है, सिवाय इसके कि मुझे नहीं पता कि दोनों लंबवत और क्षैतिज रूप से कैसे स्नैप करना है, हर बार यह एक या दूसरे है ... थोड़ा और खोजते हुए, काम करना चाहिए

2
n44s 15 अप्रैल 2020, 12:46