single page application - Strange "intelligent" behavior on Apple mobile Safari with drag-drop: the element&am

admin管理员组

文章数量:1417802

A couple of years ago, as a learning exercise, I wrote a little HTML/javascript game where you drag tiles around and drop them on an open cell in a 4x4 HTML matrix comprised of DIVs and Ps, to put the letters A through O (jumbled) into alphabetical order. I gave each cell in the P-matrix an id like so:

 <div id="t1">

        <div class="row" data-row="0" id="row1">
            <p class="sq" data-col="0" id="col1-1">A</p>
            <p class="sq" data-col="1" id="col1-2">B</p>
            <p class="sq" data-col="2" id="col1-3">C</p>
            <p class="sq" data-col="3" id="col1-4">D</p>
        </div>
        <div class="row" data-row="1" id="row2">
            <p class="sq" data-col="0" id="col2-1">E</p>
            <p class="sq" data-col="1" id="col2-2">F</p>
            <p class="sq" data-col="2" id="col2-3">G</p>
            <p class="sq" data-col="3" id="col2-4">H</p>
        </div>
        <div class="row" data-row="2" id="row3">
            <p class="sq" data-col="0" id="col3-1">I</p>
            <p class="sq" data-col="1" id="col3-2">J</p>
            <p class="sq" data-col="2" id="col3-3">K</p>
            <p class="sq" data-col="3" id="col3-4">L</p>
        </div>
        <div class="row" data-row="3" id="row4">
            <p class="sq" data-col="0" id="col4-1">M</p>
            <p class="sq" data-col="1" id="col4-2">N</p>
            <p class="sq" data-col="2" id="col4-3">O</p>
            <p class="sq" data-col="3" id="col4-4"> </p>
        </div>

    </div>

And here is the relevant CSS:

    p.draggable {          
        -webkit-user-drag: element;
        
    }

I hadn't looked at it for a few years and took it out to play it on my iPhone. Now, when a P element is dragged and dropped onto a "cell", I'm taken to the Bible Gateway website to the Colossians entry, as though there's some "intelligent" feature in the browser that is looking at the ID and concluding that somehow Colossians is involved, and the numbers in the ID are being used to select a particular passage!

Is there a name for this feature and can it be turned off either by the user or programmatically in javascript?

本文标签：