JavaScript in 10 Simple Steps or Less 2007 phần 8

Trong cơ thể của tài liệu, sử dụng các thẻ span để xác định các văn bản cho kéo. Tên dragThis khối với thuộc tính id, và sử dụng xử lý sự kiện onDragStart giao đối tượng nguồn để sourceObject khi người dùng bắt đầu kéo văn bản: kéo này | Dynamic User Interaction 431 2. In the body of the document use span tags to specify the text for dragging. Name the block dragThis with the id attribute and use the onDragStart event handler to assign the source object to sourceobject when the user starts dragging the text span id dragThis onDragStart sourceObject Drag This span 3. Create the blue target box using a div tag. Name the box dropHere and cancel onDragEnter and onDragOver as outlined earlier in this task. Finally use onDrop to display a dialog box naming the object that was dragged and where it was dropped. div id dropHere onDragEnter false onDragOver false onDrop alert was dropped on D style height 100 width 100 left 500 position absolute D background-color blue nbsp div 4. Save the file and open it in your browser. 5. Select the text and drag it and drop it on the blue box. A dialog box like Figure 208-1 appears. Figure 208-1 Dropping the text displays an alert dialog box. 432 Part 8 Task 2 0 Moving a Dragged Object in Drag and Drop notes The function in the code uses the innerHTML and outerHTML properties of objects. Consider the simple code div id myObject b Text b div . In this case myObj ect. outerHTML is div id my Object b Text b div while is just b Text b . Notice that event. srcElement is used here. This allows you to store the object being dragged in sourceObject for later use when the object is dropped. In Task 208 you saw the basics of drag and drop. This task shows you how to move a dragged object in Internet Explorer. For instance consider Figure 209-1. In this case the goal is to allow the user to drag the text into the blue square and drop it to leave it in the square and remove the original text as in Figure 209-2. Figure 209-1 Preparing to move the text. Figure 209-2 Moving the text after dragging and dropping. Doing this requires several steps 1. When the user starts dragging .